Question

如何使用jquery从json数组对象获取所有数据？
我之前尝试过，但我的代码只能从json对象获取数据。

这是我的json文件 student.json ：

{"status":true,
  "offset":0,
  "limit":25,
  "total":2,
  "data":[
    { "id":231,
      "title":"mytitle1",
      "content":"myconten1",
      "created_at":"2017-07-10 03:56:32",
      "updated_at":"2017-07-10 03:56:32"
    },{ "id":230,
        "title":"mytitle2",
        "content":"mycontent2",
        "created_at":"2017-07-10 03:56:06",
        "updated_at":"2017-07-10 03:56:06"
    }]}

我的js脚本：

     <script>
           $(document).ready(function(){  
             $(function (){
                 var $orders = $('#orders');
                $.ajax({
                    type: 'GET',
                    url: 'json/student.json',
                    success: function(data) {
                        console.log('success', data);
                        $.each(data, function(i, dataentry){
                            $orders.append('<li>dataid: '+dataentry.id+'</li>');
                        });

                    }
                });
            });
           });
        </script>

Answer 1

在success函数中，收到的data是您的ajax调用的实际数据响应。

您应该在console.log语句中看到它，其中包含offset，limit，total等所有属性。

无论如何，你试图遍历整个对象，而不是响应中的data属性，这实际上是你可能想要遍历的数组。您不会收到任何错误，因为$.each可以遍历对象文字以及数组。

以下是它的外观（我调整了变量名称以使其更清晰）：

success: function(response) {
    $.each(response.data, function(i, dataEntry){     // or response['data']
         $orders.append('<li>dataid: '+dataEntry.id+'</li>');
    });
}

希望它有所帮助。

Answer 2

首先，你不需要写这个：

$(document).ready(function(){  
             $(function (){

因为$(function()（没有空格）是$(document).ready(function()的缩写。

关于你的问题 - 我相信data是整个JSON，所以你需要提取data.data，所以我会这样写：

$(function (){
    var $orders = $('#orders');
    $.ajax({
        type: 'GET',
        url: 'json/student.json',
        success: function(response) {      // <= this is the change
            var data = response.data;      // <= going inside the data itself
            $.each(data, function(i, data){
                $orders.append('<li>dataid: '+data.id+'</li>');
            });

        }
    });
});

Answer 3

如果您的ajax呼叫成功，则：

function（data）：此数据是从服务器返回的基础对象，在您的情况下，它不是数据属性。
现在json中的数据是一个数组。

所以，不要在root对象上使用foreach，而是在 data.data 上使用它。希望它会有所帮助。

Answer 4

在这里，您将使用示例解决方案https://jsfiddle.net/xydqLLdb/

var response = {"status":true,
  "offset":0,
  "limit":25,
  "total":2,
  "data":[
    { "id":231,
      "title":"mytitle1",
      "content":"myconten1",
      "created_at":"2017-07-10 03:56:32",
      "updated_at":"2017-07-10 03:56:32"
    },{ "id":230,
        "title":"mytitle2",
        "content":"mycontent2",
        "created_at":"2017-07-10 03:56:06",
        "updated_at":"2017-07-10 03:56:06"
    }]};
    
$.each(response.data, function(i, data){
  $('ul').append('<li>dataid: ' + data.id + '</li>');
});

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

根据您的情况

$(document).ready(function(){  
 $(function (){
  var $orders = $('#orders');
  $.ajax({
    type: 'GET',
    url: 'json/student.json',
    success: function(response) {
      $.each(response.data, function(i, data){
        $orders.append('<li>dataid: ' + data.id + '</li>');
      });
    }
  });
});
});

您需要使用 repsonse数据遍历data key。

希望这会对你有所帮助。

Answer 5

您可以使用for循环获取数组中的所有值：

 $.getJSON("url_with_json_here", function(data){
     for (var i = 0, len = data.length; i < len; i++) {
         console.log(data[i]);
     } });

检查您的控制台以查看输出（Chrome，Firefox / Firebug，IE）。

jQuery还为迭代提供$ .each（），所以你也可以这样做   这样：

 $.getJSON("url_with_json_here", function(data){
     $.each(data, function (index, value) {
         console.log(value);
     }); });

如何使用JQUERY从JSON数组对象获取数据？

5 个答案: