JSON APIs and Ajax

<script>

  document.addEventListener('DOMContentLoaded', function(){

    // Add your code below this line

    // Add your code above this line

  });

</script>

 

document.getElementsByClassName('')[0].textContent = 'dd';

 

json apis are sent in bytes, application receives it as string. in order to use it in javascript, it needs to be converted into javascript object. JSON.parse does that for us.

 

 

  document.addEventListener('DOMContentLoaded', function(){

    document.getElementById('getMessage').onclick = function(){

      // Add your code below this line

const req = new XMLHttpRequest();

req.open('GET','/json/cats.json',true);

req.send();

req.onload = function(){

  const json = JSON.parse(req.responseText);

  document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);

}

 

another way to request externa data is through fetch method.

 

fetch('/json/cats.json')

   .then(response => response.json())

   .then(data => { document.getElementById('message').innerHTML = JSON.stringify(data); })

 

[ ] -> Square brackets represent an array
{ } -> Curly brackets represent an object
" " -> Double quotes represent a string. They are also used for key names in JSON