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>