title: making list clickable to load ajax request into div
body: <p>How can I make a clickable list in jquery where each item in the list is it own link not using HTML just jquery/ajax/json</p>
  
  <p>I need to make a clickable list in jquery.</p>
  
  <p>what I need to do is to make it so that any user clicking on the list item runs an actual AJAX request. The data returned from that request must then be used to fill the box on the right side of the page.</p>
  
  <p>I’m stuck on the on click function I create and i’m not sure what to do next and when I run the page the people.json file isnt appearing on the page</p>
  
  <p>my javascript</p>
  
  <pre><code>'use strict';
  
  $(function() {
  
  $('#resultBox').click(function() {
    let url = $(this).data('url');
    makeAjaxRequest(url);
  });
  
  
  function makeAjaxRequest (url) {
   let request = $.ajax({
          method: 'GET',
          url: 'people.json'
        });
  
   request.done(function(data) {
          let list = data.body.list;
          let resultBox = $('#result-box');
          let unorderedList = $('&lt;ul&gt;');
          resultBox.append(unorderedList);
  
          for (let person of list) {
              let listItem = $('&lt;li&gt;');
              listItem.text(person.name);
              listItem.attr('data-url', person.links[0].href);
              unorderedList.append(listItem);
          }
  
      });
  
      request.fail(function(response) {
          console.log('ERROR:' + response.statusText);
      });
  
  
  }
  });
  </code></pre>
  
  <p>people.js</p>
  
  <pre><code>{
    "links":[ {
      "rel": "self", "href":"http://www.philart.net/api/people.json"
    }
    ,
    {
      "rel": "parent", "href":"http://www.philart.net/api.json"
    }
    ],
    "head": {
      "title": "People", "type":"listnav"
    }
    ,
    "body": {
      "list":[ {
        "name":"Adam",
        "links":[ {
          "rel": "self", "href":"http://www.philart.net/api/people/325.json"
        }
        ]
      }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;link href="styles.css" rel="stylesheet" type="text/css" /&gt;
    &lt;script type="text/javascript" src="jquery.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="ajax.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;title&gt;AJAX&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="loaded-data"&gt;&lt;/div&gt;
    &lt;a href="#"&gt;
      &lt;div id="result-box"&gt;
        &lt;a&gt;&lt;/div&gt;
  
  
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
    font-family: sans-serif;
  }
  
  #loaded-data {
    width: 25%;
    height: 50%;
    overflow: scroll;
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: silver;
    padding: 30px;
  
  }
  </code></pre>
  
  <p>what the result should be is that by clicking the names on the list, i can make a ajax request and load the data of each url into the div.</p>