如何使用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數據進行循環。

希望這會幫助你。