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/