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

Question

How can I make a clickable list in jquery where each item in the list is its 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.

I'm stuck on the on click function I create and i'm not sure what to do next

Do i need to add the JSON file to?

MY Javascript

 'use strict'; $(function() { $("#result-box").on("click", 'li', function() { console.log("#result-box"); }); let request = $.ajax({ method: 'GET', url: 'people.json', dataType: '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); } }); 

 { "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" } ] } , { "name":"Abigail Adams", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/157.json" } ] } , { "name":"John Adams", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/410.json" } ] } , { "name":"Samuel Adams", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/439.json" } ] } , { "name":"Charles Addams", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/1.json" } ] } , { "name":"Aesculapius", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/127.json" } ] } , { "name":"Richard Allen", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/169.json" } ] } , { "name":"Saint Andrew", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/419.json" } ] } , { "name":"John Andrews", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/352.json" } ] } , { "name":"Fra Angelico", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/278.json" } ] } , { "name":"Maya Angelou", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/309.json" } ] } , { "name":"Susan B. Anthony", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/158.json" } ] } , { "name":"Apollo", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/312.json" } ] } , { "name":"Cpl. Moses Arnold, Jr.", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/236.json" } ] } , { "name":"Arthur Ashe", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/413.json" } ] } , { "name":"Athena", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/234.json" } ] } , { "name":"Atlas", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/401.json" } ] } , { "name":"William Wallace Atterbury", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/317.json" } ] } , { "name":"Crispus Attucks", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/2.json" } ] } , { "name":"Saint Augustine", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/265.json" } ] } , { "name":"Bacchus", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/3.json" } ] } , { "name":"Johann Sebastian Bach", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/4.json" } ] } , { "name":"Rocky Balboa", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/5.json" } ] } , { "name":"Matthias William Baldwin", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/6.json" } ] } , { "name":"Ernesta Drinker Ballard", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/156.json" } ] } , { "name":"Bartolommeo Bandinelli", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/277.json" } ] } , { "name":"Felix Barbelin", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/210.json" } ] } , { "name":"Albert Barnes", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/316.json" } ] } , { "name":"John Barry", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/7.json" } ] } , { "name":"Josiah Bartlett", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/435.json" } ] } , { "name":"Fra Bartolommeo", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/288.json" } ] } , { "name":"John Bartram", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/8.json" } ] } , { "name":"Jasper Baxter", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/336.json" } ] } , { "name":"James A. Beaver", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/9.json" } ] } , { "name":"Alexander Graham Bell", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/422.json" } ] } , { "name":"Giovanni Bellini", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/269.json" } ] } , { "name":"Cornelius FJ Beukenkamp Jr.", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/396.json" } ] } , { "name":"Julian Biddle", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/223.json" } ] } , { "name":"William W. Bodine, Jr.", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/122.json" } ] } , { "name":"Anders Svennson Bonde", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/255.json" } ] } , { "name":"Sgt. John J. Bonk, Jr.", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/237.json" } ] } , { "name":"Pierre Bontemps", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/282.json" } ] } , { "name":"Kevin Leah Bowser", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/337.json" } ] } , { "name":"Aloysius Boyle", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/369.json" } ] } , { "name":"Donato Bramante", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/296.json" } ] } , { "name":"Samuel Livingston Breese", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/183.json" } ] } , { "name":"Carrol Brenek", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/353.json" } ] } , { "name":"Filippo Brunelleschi", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/300.json" } ] } , { "name":"William Cullen Bryant", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/214.json" } ] } , { "name":"Charles J. Buckley", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/186.json" } ] } , { "name":"Buddha", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/380.json" } ] } , { "name":"John Christian Bullitt", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/10.json" } ] } , { "name":"Smedley D. Butler", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/173.json" } ] } , { "name":"Alexander Milne Calder", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/172.json" } ] } , { "name":"James Caldwell", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/196.json" } ] } , { "name":"Calliope", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/175.json" } ] } , { "name":"William Camac", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/11.json" } ] } , { "name":"Ralph Campana", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/354.json" } ] } , { "name":"Johan Campanius", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/249.json" } ] } , { "name":"John J. Carlin", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/219.json" } ] } , { "name":"Steve Carlton", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/12.json" } ] } , { "name":"Hugo T. Caroselli", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/331.json" } ] } , { "name":"Charles Carroll", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/13.json" } ] } , { "name":"John Carroll", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/125.json" } ] } , { "name":"Bill Cash", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/177.json" } ] } , { "name":"Lewis Cass", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/392.json" } ] } , { "name":"Mary Cassat", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/14.json" } ] } , { "name":"Octavius Catto", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/471.json" } ] } , { "name":"Wilt Chamberlain", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/182.json" } ] } , { "name":"William Chance", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/321.json" } ] } , { "name":"James A. Chappell", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/231.json" } ] } , { "name":"King Charles II", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/263.json" } ] } , { "name":"Samuel Chase", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/443.json" } ] } , { "name":"Chief Joseph", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/162.json" } ] } , { "name":"Abraham Clark", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/457.json" } ] } , { "name":"Bobby Clarke", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/377.json" } ] } , { "name":"Christopher Robert Clarke", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/338.json" } ] } , { "name":"Henry Clay", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/394.json" } ] } , { "name":"Roberto Clemente", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/204.json" } ] } , { "name":"George Clinton", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/440.json" } ] } , { "name":"George Clymer", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/452.json" } ] } , { "name":"James J. Cochran", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/387.json" } ] } , { "name":"Peter Larsson Cock", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/252.json" } ] } , { "name":"Rebecca Cole", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/15.json" } ] } , { "name":"Sharonda Coleman-Singleton", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/424.json" } ] } , { "name":"John Coltrane", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/412.json" } ] } , { "name":"Christopher Columbus", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/16.json" } ] } , { "name":"George Conor-Wood", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/206.json" } ] } , { "name":"Meta Conor-Wood", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/207.json" } ] } , { "name":"Russell Conwell", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/17.json" } ] } , { "name":"Nicolaus Copernicus", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/19.json" } ] } , { "name":"Correggio", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/295.json" } ] } , { "name":"SW Crawford", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/143.json" } ] } , { "name":"Andrew Gregg Curtin", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/20.json" } ] } , { "name":"Benedetto da Maiano", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/280.json" } ] } , { "name":"Antonello da Messina", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/293.json" } ] } , { "name":"Leonardo da Vinci", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/304.json" } ] } , { "name":"Kim Dae-jung", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/264.json" } ] } , { "name":"John AB Dahlgren", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/21.json" } ] } , { "name":"Anders Larson Dalbo", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/253.json" } ] } , { "name":"David", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/328.json" } ] } , { "name":"Samuel Davies", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/195.json" } ] } , { "name":"Richard Foulke Day", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/224.json" } ] } , { "name":"Eugene V. Debs", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/343.json" } ] } , { "name":"Luca Della Robbia", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/281.json" } ] } , { "name":"Demeter", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/187.json" } ] } , { "name":"Richard F. Devine", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/200.json" } ] } , { "name":"Arnolfo di Lapo", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/299.json" } ] } , { "name":"Diana", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/22.json" } ] } , { "name":"Charles Dickens", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/23.json" } ] } , { "name":"John Dickinson", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/451.json" } ] } , { "name":"Richardson Dilworth", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/24.json" } ] } , { "name":"Dionysus", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/400.json" } ] } , { "name":"Fitz Eugene Dixon, Jr.", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/233.json" } ] } , { "name":"Don Quixote", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/139.json" } ] } , { "name":"Thomas Donahue", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/375.json" } ] } , { "name":"Donatello", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/276.json" } ] } , { "name":"Stephen A. Douglas", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/391.json" } ] } , { "name":"Frederick Douglass", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/310.json" } ] } , { "name":"Norton Downs, Jr.", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/225.json" } ] } , { "name":"Anthony J. Drexel", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/25.json" } ] } , { "name":"Katherine Drexel", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/409.json" } ] } , { "name":"John Drinkwater", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/221.json" } ] } , { "name":"WEB Du Bois", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/307.json" } ] } , { "name":"Mahlon Duckett", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/178.json" } ] } , { "name":"Dr. Tanner G. Duckrey", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/339.json" } ] } , { "name":"Hugh Duffy", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/322.json" } ] } , { "name":"Albrecht Durer", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/305.json" } ] } , { "name":"Mary Dyer", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/26.json" } ] } , { "name":"Thomas Eakins", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/27.json" } ] } , { "name":"Michael Francis Egan", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/408.json" } ] } , { "name":"William Ellery", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/450.json" } ] } , { "name":"Erato", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/176.json" } ] } , { "name":"John Ericsson", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/28.json" } ] } , { "name":"Julius Erving", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/29.json" } ] } , { "name":"Eve", "links":[ { "rel": "self", "href":"http://www.philart.net/api/people/326.json" } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.js" charset="utf-8"></script> <script type="text/javascript" src="ajax.js" charset="utf-8"></script> <title>AJAX</title> </head> <body> <div id="loaded-data"></div> <a href="#"> <div id="result-box"> <a></div> </body> </html> 

Answer 1

Not sure about what you want to do , does this work for you ?

listItem.click(function() {
  var url = $(this).data('url');
  makeAjaxRequest(url);
});


function makeAjaxRequest (url) {
      $.ajax({
        method: 'GET',
        url: url ,
        dataType: 'json',
      });
}