JavaScript: How to Loop through JSON objects with jQuery in an AJAX call

Question

I am having difficulty trying to learn this concept.

I have a JSON file with a list of hospitals, their address, hours and phone.

I want to make an AJAX call from JSON data and list the data onto the screen.

I can only get the first hospital to list, when I try to list the address only the address lists.

How can I write this using a loop that will list the objects and their properties?

Can someone explain this to me, please?

Please help -- thank you in advance.

JSON --

https://api.myjson.com/bins/b29r7

JS --

var url = 'https://api.myjson.com/bins/b29r7';

$.ajax({
    url: url,
    method: 'GET',
}).done(function(result){
    var data = result.surrey;
    for(var i=0; i<data.length; i++){
        $('#data').each(function(index, ele){
            $(ele).html(data[index].hospital);
        });
    }
}).fail(function(err){
    throw err;
});

HTML --

<p id="data"></p>

Answer 1

Here's a working example:

 var url = 'https://api.myjson.com/bins/b29r7'; $.ajax({ url: url, method: 'GET', }).done(function(result) { // JSON data array var data = result.surrey; // get DOM node to be parent of child list nodes var $data = $('#data'); // iterate through each object in JSON array data.forEach(function(item) { // create an unordered list node var $ul = $('<ul></ul>'); // iterate through all the properties of current JSON object for (var field in item) { // append list item node to list node $ul.append(`<li>${field}: ${item[field]}</li>`); } // append list node to parent node $data.append($ul); }); }).fail(function(error) { console.error(error); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="data"></div> 

JSFiddle Demo: https://jsfiddle.net/L6j8n17j/4/

Answer 2

UPDATE : This is more clear version. You can print your values in your html like this.

 $.ajax({ type: 'ajax', url: 'https://api.myjson.com/bins/b29r7', async: false, dataType: 'json', success: function (data) { data = data.surrey; var html = ''; var i; for (i = 0; i < data.length; i++) { html+='<span>'+data[i].hospital+'</span>'; html+='<span>'+data[i].address+'</span>'; //so on } $('#data').html(html); }, error: function () { alert('Could not get Data'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='data'> </div> 

This should bring your values on the console and then you can use html function at the same time in the loop to display the data. Thanks!

Answer 3

as per requirement please try below code

 var url = 'https://api.myjson.com/bins/b29r7'; $.ajax({ url: url, method: 'GET', }).done(function(result){ var data = result.surrey; var i = 0; var hosData = "<table border='1'>"; hosData += "<tr>"; hosData += "<th>"; hosData += 'hospital'; hosData += "</th>"; hosData += "<th>"; hosData += 'address'; hosData += "</th>"; hosData += "<th>"; hosData += 'hours'; hosData += "</th>"; hosData += "<th>"; hosData += 'phone'; hosData += "</th>"; hosData += "</tr>"; for(i=0;i<data.length;i++) { hosData += "<tr>"; hosData += "<td>"; hosData += data[i].hospital; hosData += "</td>"; hosData += "<td>"; hosData += data[i].address; hosData += "</td>"; hosData += "<td>"; hosData += data[i].hours; hosData += "</td>"; hosData += "<td>"; hosData += data[i].phone; hosData += "</td>"; hosData += "</tr>"; } hosData += "</table>"; $("#data").html(hosData); }).fail(function(err){ throw err; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="data"> </div>