Pure JS XHR example

by Anup Pradhan

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
//
//
(function() {

    // Your code here.

    //Get the button
    var el = document.querySelector('button');

    //When a user clicks on the button

    el.addEventListener('click', function(e) {

      var req = new XMLHttpRequest();
      req.open('get', 'https://jsonplaceholder.typicode.com/posts');
      req.addEventListener('load', function(e) {

        if (xhr.status === 200) {

          //turn the response into a json object
          var data = JSON.parse(req.responseText);

          //render the data in the page
          console.log(data);

          var us = document.getElementById('data');

          for (var i=0; i<data.length; i++) {
            var li = document.createElement('li');
            li.innerHTML = data[i].title;
            ul.appendChild(li);          
          }
        }
      });

      });

    })(); //(function() {