javascript - How can I get data from JSON array object with JQUERY? - Stack Overflow

admin管理员组

文章数量:1320670

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>

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>

• javascript
• jquery
• json

Share Improve this question Follow edited Jan 4, 2020 at 23:54 Muhammad Dyas Yaskur 8,1381111 gold badges6060 silver badges8484 bronze badges asked Aug 27, 2017 at 12:46 ajprs28ajprs28 6311 gold badge33 silver badges1515 bronze badges 11

• you mean your ajax call fail? – artgb Commented Aug 27, 2017 at 12:50
• You should read up on the difference between JSON, an object literal in JS and an Array. – malifa Commented Aug 27, 2017 at 12:51
• 2 i think it shoild be : data.data[0].id – Anupam Singh Commented Aug 27, 2017 at 12:52
• i can grab the data with ajax and show it in the console log only, but when i try to show in the html data undifiend @artgb – ajprs28 Commented Aug 27, 2017 at 12:55
• 1 to add to my previous ment: if you load a json via jquery ajax, it automatically will parse it to a object literal so it can be used directly in your script via dot notation. Just to make the wording more clear. – malifa Commented Aug 27, 2017 at 13:05

 |  Show 6 more ments

4 Answers 4

Sorted by: Reset to default 5

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

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

Because $(function() ( w/o a 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>');
            });

        }
    });
});

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.

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.

Here you go with an example solution https://jsfiddle/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./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.

本文标签： javascriptHow can I get data from JSON array object with JQUERYStack Overflow