How to parse this API return in jQuery?

Question

I'm trying to loop all the items in the product array. Using an ajax call I get the following response from the API:

productData = {"product":[{"id":"9200000083451240","title":"Apple Lightning Cable"},{"id":"9200000098453451","title":"Apple iPhone XR"}],"totalResultSize":2}

As you can see the data I need is inside a variable "productData", how do I access it from my AJAX response data?

I've tried data.productData.product and some other stuff but nothing works.

    var searchTerm = $("#searchterm").val();

    $.ajax({
        url: 'https://api.com/search?term=' + searchTerm,
        type: 'GET',
    }).done(function (data) {
        $.each(data.productData.product, function (index, element) {
            console.log(element.title);
        });
        console.log('---- Data ----');
        console.log(data);
    });

Please help.

Are you saying that the first code sample is what you're returning to the AJAX request? If so it's invalid; you need to remove the productData = from the start — Rory McCrossan
– Rory McCrossan, Commented May 21, 2019 at 16:06
@RoryMcCrossan yes, the first code sample is the ajax call data payload. Simply stripping "productData =" is an option, but is that the way to go or should I handle this differently? — webslash
– webslash, Commented May 21, 2019 at 16:09
You will have to remove it, there is no other option. What you'r returning right now is not valid JSON. Also note that you're missing a comma between the properties in the first object of the array. Once you've fixed that change the loop to go through data.product and your logic will work. — Rory McCrossan
– Rory McCrossan, Commented May 21, 2019 at 16:10
@RoryMcCrossan Allright! Guess I was thinking about it too much. Thanks — webslash
– webslash, Commented May 21, 2019 at 16:11

Kirsten Phukon · Accepted Answer · 2019-05-21 20:27:16Z

1

productData = {"product":[{"id":"9200000083451240","title":"Apple Lightning Cable"},{"id":"9200000098453451","title":"Apple iPhone XR"}],"totalResultSize":2}

is not valid json response.

{"product":[{"id":"9200000083451240","title":"Apple Lightning Cable"},{"id":"9200000098453451","title":"Apple iPhone XR"}],"totalResultSize":2}

is valid json response and it can be get using :

// after success in ajax
.done(function (data) {
   console.log(data.product);   // More under it
   console.log(data.totalResultSize);
})

edited May 21, 2019 at 20:27

Kirsten Phukon

3143 silver badges17 bronze badges

answered May 21, 2019 at 16:14

parveen

5773 silver badges13 bronze badges

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

Comments

sohaieb azaiez · Accepted Answer · 2019-05-21 16:13:57Z

0

to make your response data as a JS object , you have to call this function :

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

source: JSON.parse()

to iterate objects inside a json object you may use $.each() function:

var obj = {
one: 1,
two: 2,
three: 3,
four: 4,
five: 5
};
$.each(obj, function (index, value) {
console.log(value);
});

source: $.each()

answered May 21, 2019 at 16:13

sohaieb azaiez

81011 silver badges23 bronze badges

Comments

webslash · Accepted Answer · 2019-05-21 16:21:23Z

0

Stripped the "productData = " part in from of the API response (as suggested by Rory McCrossan) and then used JSON.parse (thanks sohaieb). I'm able to loop the products now. Thank you!

answered May 21, 2019 at 16:21

webslash

531 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to parse this API return in jQuery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related