Retrieve data from json jQuery

Question

I have this JSON response below , and I want to avoid the first four properties and use the properties in the data array.

JSON response is

    {
   "page":2,
   "per_page":3,
   "total":12,
   "total_pages":4,
   "data":[
      {
         "id":4,
         "first_name":"Eve",
         "last_name":"Holt",
         "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
      },
      {
         "id":5,
         "first_name":"Charles",
         "last_name":"Morris",
         "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
      },
      {
         "id":6,
         "first_name":"Tracey",
         "last_name":"Ramos",
         "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
      }
   ]
}

And below is the jQuery 3.3.1 code

$.ajax({
    method: 'GET',
    url: 'https://reqres.in/api/users?page=2',
    success: function(data) {
      $.each(data,function(i,data){
        $data.append('<li><strong>First Name</strong> :  '+ data.first_name+ '</br>'+'<strong>Last Name</strong> :  '+ data.last_name +'</li>');

        console.log( this.first_name);    
    });
},
error: function() {
    alert('error loading data');
}

try something like $.each(data.data, function(i, val){});. Also make sure the Ajax's dataType is JSON. — Mojo Allmighty
– Mojo Allmighty, Commented Mar 19, 2018 at 1:31

Shiladitya · Accepted Answer · 2018-03-19 03:25:15Z

1

As @MojoAllmighty said below this works fine.Data.data getting the array of the JSON response

$.each(data.data,function(i,data){
  $data.append('<li><strong>First Name</strong> :  '+ data.first_name+ '</br>'+'<strong>Last Name</strong> :  '+ data.last_name +'</li>');
});

edited Mar 19, 2018 at 3:25

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

answered Mar 19, 2018 at 1:37

stefanos gian

178 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Retrieve data from json jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related