Pure JS XHR example

by Kavitha Venkataswamy

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


  // Your code here.
  
  var loadbutton = document.querySelector('button');
  var getdata = document.getElementById('data');
 
 
  //var ui = document.createElement('u1');
  //ui.appendChild(document.createElement('li'));
 
 var req = new XMLHttpRequest();
 var url = "https://jsonplaceholder.typicode.com/posts";
 req.open("GET",url,true);
 req.setRequestHeader("Accept","application/json");
 req.send(null);
 
 loadbutton.addEventListener("click",function(e){
    console.log(req.responseText);
    
    var data = JSON.parse(req.responseText);
    //Add it to li 
    
    var 
  
    
 });