Pure JS XHR example

by oleg_hansen

HTML

<h1>Ajax Exercise</h1>

<div>
  <button>Load Content</button>
</div>

<div class="container">
  <ul id="data">
  </ul>

  <ul id="details">
  </ul>
</div>

CSS

.container {
  display: flex;
}

JavaScript

// In the index.html file there is a button.  When the button is
// clicked kick off an HTTP GET request to the following URL:
//
//    https://jsonplaceholder.typicode.com/posts
//
// The response text will be a JSON-encoded array of objects.  Inspect
// the response using the browser debugger and then insert the objects
// into the DOM.  Each object in the response should be used to create
// a new <li> element in the existing <ul> container with the id of "data".  
// Display the post title within the <li> element
//
// BONUS #1:
//
// Clicking one of the <li> elements should display all information
// about the clicked post's author (user) in the <ul> with the ID of "details".
// Hint: 
//    make another HTTP request to
//    https://jsonplaceholder.typicode.com/users/{N} 
//    where {N} is the post user_id
//
//


//2. when user clicks send request



//(function() {
  //1.get button
  var el = document.getElementsByTagName('button');
  console.log(el);
  el[0].addEventListener('click', function(event) { //instead user query selector its newer
    //event
    var req = new XMLHttpRequest();

    // attach listener (next slide)

    req.open("GET", 'https://jsonplaceholder.typicode.com/posts', true);
    // set header after open but before send 
    // defaults to Accept */* 

    req.setRequestHeader("Accept", "application/json");
    req.send(null);
    req.addEventListener("load", function(e) {
      if (req.status == 200) {
      //coppied this part
      var data = JSON.parse(req.responseText);
      console.log(data);
      var ul=document.geteElementById('data');
      
      for (i=0; i<data.length; i++){
      var li = document.createElement('li');
      li.innerHTML = data[i].title;
      ul.appendChild(li);
      //part
      }
      
        console.log(req.responseText);
      }
    });
  });


//})();