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
I need to make a clickable list in jquery.
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.
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
'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 = $('<ul>');
resultBox.append(unorderedList);
for (let person of list) {
let listItem = $('<li>');
listItem.text(person.name);
listItem.attr('data-url', person.links[0].href);
unorderedList.append(listItem);
}
});
request.fail(function(response) {
console.log('ERROR:' + response.statusText);
});
}
});```