Getting data from API with AJAX

Question

I am trying to get data from API and display them using AJAX I have this code

 $(document).ready(function(){  
          $('.show').click(function(){     
          $.ajax({
           url: 'url',
           dataType: 'json',
           success: function(data) {
              var items = [];
              $.each(data, function(key, val) {

                items.push('<li id="' + key + '">' + val + '</li>');    

              });

              $('<ul/>', {
                 'class': 'interest-list',
                 html: items.join('')
              }).appendTo('body');

           },
          statusCode: {
             404: function() {
               alert('There was a problem with the server.  Try again soon!');
             }
           }
    });
    });
    });

I have this result:

[object Object],[object Object],[object Object],[object Object],

What must I fix in my code?

@Islam Elshobokshy ,it must be added to the body,but it just add [Object Object],[object Object],[object Object],[object Object]. — user3623368
– user3623368, Commented Feb 18, 2019 at 14:10

Marc B · Accepted Answer · 2019-02-18 15:54:27Z

1

$.each iterates over the array, and key was the index of the array, and val was the entire object

You could change this line of code

items.push('<li id="' + key + '">' + val + '</li>');

to

var key = Object.keys(val)[0];
items.push('<li id="' + key + '">' + val[key] + "</li>");

to just get the first key directly. Here is the documentation for Object.keys.

edited Feb 18, 2019 at 15:54

answered Feb 18, 2019 at 15:27

Marc B

586 bronze badges

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

Comments

Mr L · Accepted Answer · 2019-02-18 14:15:55Z

0

First of all, you'd better add the type:'GET' field to define what kind of call are you doing. Then you can use var json = JSON.parse(data) to read all the incoming data from data like this:

var time = json['foo'];

or if you have an array:

var time = json[index]['foo'];

you can find more details here https://www.w3schools.com/js/js_json_parse.asp and here https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

answered Feb 18, 2019 at 14:15

Mr L

131 bronze badge

1 Comment

Musa Over a year ago

The default type is GET, dataType is set to json so the data is already converted and you don't use JSON.parse

Collectives™ on Stack Overflow

Getting data from API with AJAX

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related