Question

我正在制作一个在html表中显示json数据的ajax get请求。我知道如何用javascript做到这一点，所以我想我会用jquery来试试。我的.each循环中存在问题。关于参数(key, object)如何在每个位置处理多个键值对并且怀疑这是我的错误所在。我很模糊。

我尝试了JSON.parse，但这并没有帮助。我肯定得到数据，因为我可以在警告框中显示它。我怀疑我所做的不是行业标准，并且有更优雅的方式来实现我的目标。

$("#button").click(function(){    

                  $.ajax({
                  type: 'get',
                  url: "http://www.adweb.agency/interview/api/animals",
                  data: {format: 'json'  },
                  dataType: 'json',
                  success: function(data){  

                        var i = 0;
                        var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>';

                                 $.each(data, function(key, object){ 

                                            table += ('<tr>');
                                            table += ('<td>' + data.Title + '</td>');
                                            table += ('<td><img src="' + data.ImageURLs.Thumb + '"></td>');
                                            table += ('<td>' + data.Description + '</td>');
                                            table += ('</tr>');

                                           });

                                     table += '</table>'; 

                                    $('#tableContainer').html(table);

                               }

                         });

                        });

Answer 1

假设你的响应变量'data'是一个数组，你在每个循环的每次迭代中访问错误的变量：

$("#button").click(function(){    

    $.ajax({
        type: 'get',
        url: "http://www.adweb.agency/interview/api/animals",
        data: {format: 'json'  },
        dataType: 'json',
        success: function(data){  

            var i = 0;
            var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>';

            // NOTE!  I changed 'object' to 'value' here
            // NOTE 2!  We added a JSON.parse on the 'data' variable to convert from JSON to JavaScript objects.
            $.each(JSON.parse(data), function(key, value){ 

                // We need to access the value variable in this loop because 'data' is the original array that we were iterating!
                table += ('<tr>');
                table += ('<td>' + value.Title + '</td>');
                table += ('<td><img src="' + value.ImageURLs.Thumb + '"></td>');
                table += ('<td>' + value.Description + '</td>');
                table += ('</tr>');

            });

            table += '</table>'; 

            $('#tableContainer').html(table);

        }

    });

});

请参阅上述代码中的注释以了解更改。

请参阅jQuery的.each（）迭代器here上的文档。

Answer 2

这是您需要的正确代码，只需复制并粘贴，问候！

 <!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>

<input id = "btnSubmit" type="button" value="Release"/>

<div id="tableContainer">
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#btnSubmit").click(function(){           

              $.ajax({
                      dataType: 'json',
                      url:   "http://www.adweb.agency/interview/api/animals",
                      type:  'get',

                      success:  function (data) {
                         var i = 0;
                         var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>';
                         data = $.parseJSON(data)
                               $.each(data, function (idx, obj) {                                   
                                    table += ('<tr>');
                                    table += ('<td>' + obj.Title + '</td>');
                                    table += ('<td><img src="' + obj.ImageURLs.Thumb + '"></td>');
                                    table += ('<td>' + obj.Description + '</td>');
                                    table += ('</tr>');
                              });
                         table += '</table>';
                        $("#tableContainer").html(table);

                      },
                      error: function(XMLHttpRequest, textStatus, errorThrown) {
                            alert("some error");
                      }
              });
    }); 
});




</script>
</body>

</html>

Answer 3

试试这段代码：

$.each(data, function(key, object){ 

    table += '<tr>';
    table += '<td>' + data[key].Title + '</td>';
    table += '<td><img src="' + data[key].ImageURLs.Thumb + '"></td>';
    table += '<td>' + data[key].Description + '</td>';
    table += '</tr>';
});

如何通过.each循环将json数据处理成html表

3 个答案: