JavaScript：如何在AJAX调用中通过jQuery循环浏览JSON对象

Question

我很难尝试学习这个概念。

我有一个JSON文件，列出了医院，他们的地址，小时和电话。

我想从JSON数据进行AJAX调用并将数据列在屏幕上。

我只能得到第一家医院列出，当我尝试列出地址只有地址列表。

如何使用将列出对象及其属性的循环来编写此代码？

有人可以向我解释这件事吗？

请帮助 - 预先感谢您。

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

这里有一个工作示例：

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演示：https://jsfiddle.net/L6j8n17j/4/

Answer 2

UPDATE：这是更清晰的版本。你可以像这样在你的html中打印你的值。

 
    
 
      $.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>

这应该会在控制台上你的价值观，然后你可以在同一时间使用HTML功能，在循环中显示的数据。谢谢！

Answer 3

按规定请尝试以下代码

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>"; 
 
     
 
     \t hosData += "<th>"; 
 
     \t hosData += 'hospital'; 
 
     hosData += "</th>"; 
 
     
 
     \t hosData += "<th>"; 
 
     \t hosData += 'address'; 
 
     hosData += "</th>"; 
 
     
 
     hosData += "<th>"; 
 
     \t hosData += 'hours'; 
 
     hosData += "</th>"; 
 
     
 
     hosData += "<th>"; 
 
     \t hosData += 'phone'; 
 
     hosData += "</th>"; 
 
     
 
     hosData += "</tr>"; 
 
    for(i=0;i<data.length;i++) 
 
    { 
 
     hosData += "<tr>"; 
 
     
 
     \t hosData += "<td>"; 
 
     \t hosData += data[i].hospital; 
 
     hosData += "</td>"; 
 
     
 
     \t hosData += "<td>"; 
 
     \t hosData += data[i].address; 
 
     hosData += "</td>"; 
 
     
 
     hosData += "<td>"; 
 
     \t hosData += data[i].hours; 
 
     hosData += "</td>"; 
 
     
 
     hosData += "<td>"; 
 
     \t 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>