Pure JS XHR example

by Zachary Ho

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
//
//

// Write your code here...
var url1 = "https://jsonplaceholder.typicode.com/posts";

var buttonEl = document.querySelector("button");
var dataList = document.getElementById("data");
// var detailsListEl = document.getDataByElement("details");

buttonEl.addEventListener("click", function(e) {

  var req = new XMLHttpRequest();
  
  req.addEventListener("load", function(e) {
  
    var data;
    var newLi;
  
    if (req.status == 200) {
      data = JSON.parse(req.responseText);
    
      for (var i = 0; i < data.length; i++) {
        newLi = document.createElement('li');
        newLi.appendChild(document.createTextNode(data[i].title));
        
        dataList.append(newLi);
      }
    }
  });
  
  req.open("GET", url1);
  req.send();
});