CODEWITHSUNDEEP
javascriptjqueryjson
ajprs28
ajprs28

Reputation: 63

How can I get data from JSON array object with JQUERY?

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>

Upvotes: 1

Views: 12025

Answers (4)

Ricky Levi
Ricky Levi

Reputation: 8007

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

        }
    });
});

Upvotes: 5

Shiladitya
Shiladitya

Reputation: 12161

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.

Upvotes: 0

Anupam Singh
Anupam Singh

Reputation: 1166

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.

Upvotes: 0

malifa
malifa

Reputation: 8165

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.

Upvotes: 2

Related Questions