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

Question

How can I get all the data from the JSON array objects with jquery?
I have tried before but my code only can get the data from the JSON object.

This is my json file 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"
    }]}

My js script :

<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

So first, you don't need to write this:

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

Because $(function() ( w/oa space ) is a short for $(document).ready(function() .

Regarding your issue - I believe that data is the entire JSON, so you need to extract data.data , so I would write this:

$(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

In your success function, the data received is the actual data response of your ajax call.

You should see it in your console.log statement with all properties like offset , limit , total etc.

Anyway, you're trying to loop through the whole object, not the data property inside the response, which is actually the array you probably want to loop through. You won't get any errors because $.each can loop through object literals as well as through arrays.

Here's how it should look like (i adjusted the variable names to make it clearer):

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

Hope it helps.

Answer 3

If your ajax call is successful, then :

• function(data) : this data is the base object returned from server, in your case its not the data property.

• now the data in your json is an array.

so, instead of using foreach on root object, use it on data.data . hope it will help.

Answer 4

Here you go with an example solution 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>

Based on your scenario

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

You need to loop through the data key with the repsonse data .

Hope this will help you.