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

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

因此，首先，你不需要写这篇文章：

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

因为$(function()（W/O空间）是短的$(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 2

You can get all the values in an array using a for loop:

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

Check your console to see the output (Chrome, Firefox/Firebug, IE).

jQuery also provides $.each() for iterations, so you could also do this:

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

Answer 3

在您的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 4

如果你的Ajax调用成功，则：

• 功能（数据）：此数据为基本对象从服务器返回的，在你的情况下它不是数据属性。

• 现在的数据在你的json中是一个数组。

这样，而是采用根对象上的foreach，用它在data.data。希望它会有所帮助。

Answer 5

在这里你去用一个例子液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>'); 
 
     }); 
 
    } 
 
    }); 
 
}); 
 
});

您需要通过datakey与repsonse数据进行循环。

希望这会帮助你。