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


#1

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);
    });


}
});```

#2

We need HTML to create the links, since JS does not have anchor or link elements (<a href></a>, <link href>). JS is only the behaviors API and does not have a principal role in creating the DOM. That comes from the Document, which is HTML.

Found this…

https://www.sitepoint.com/ajaxjquery-getjson-simple-example/


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.