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

这是一个有效的例子：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

JSFiddle演示：https://jsfiddle.net/L6j8n17j/4/

Answer 2

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

＆＃13;

 
  
            $.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');
                }
            });

＆＃13;

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

＆＃13;

这应该在控制台上显示您的值，然后您可以在循环中同时使用html函数来显示数据。谢谢！

Answer 3

根据要求，请尝试以下代码

＆＃13;

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;
});

＆＃13;

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

＆＃13;

JavaScript：如何在AJAX调用中使用jQuery循环访问JSON对象

3 个答案: