How to parse structured data within a json array using jquery?

Question

I have looked quite a bit here, and haven't seemed to be able to find the solution to my simple issue. For some reason json arrays confuse me. Basically I am creating a table that lists names of items. Here is my json:

{"status":true,"user":{"username":"TestUser","avatar":"xxxxxx.jpg","rep":{"positive":13,"neutral":0,"negative":0},"products":[{"id":"3yvIJHl","title":"Your Way To Money Heaven E-Book","image":{"url":"xxxxx.png","path":"product_images\/xxxxx.png"},"quantity":{"min":1,"max":1000000},"price":10,"currency":"USD","stock_warning":0,"type":"file","stock":9223372036854775807},{"id":"Q1yLHMn","title":"Private method","image":{"url":"xxxxxx.jpeg","path":"xxxxxx.jpeg"},"quantity":{"min":1,"max":1000000},"price":15,"currency":"USD","stock_warning":0,"type":"file","stock":9223372036854775807},{"id":"fV4JCNi","title":"Test","image":null,"quantity":{"min":1,"max":1},"price":500,"currency":"USD","stock_warning":0,"type":"file","stock":9223372036854775807}],"groups":[],"feedbacks":[{"updated_at":"2019-03-06 02:02:00","stars":5,"rating":1,"comment":"Great.. all accounts working fine thanks","response":null,"product":null},{"updated_at":"2019-03-03 20:11:45","stars":5,"rating":1,"comment":"Very good service!","response":null,"product":null},{"updated_at":"2019-02-27 21:29:54","stars":5,"rating":1,"comment":"GREAT buyer i got netflix working...","response":null,"product":null},{"updated_at":"2019-02-22 13:26:03","stars":5,"rating":1,"comment":"great cheap and fast","response":null,"product":null},{"updated_at":"2019-02-21 22:26:55","stars":5,"rating":1,"comment":"very nice when my account wasnt working i sent him a message nice support.","response":null,"product":null},{"updated_at":"2019-02-18 20:52:04","stars":5,"rating":1,"comment":"HQ","response":null,"product":null},{"updated_at":"2019-02-17 20:42:16","stars":5,"rating":1,"comment":"Quick answers, great seller!","response":null,"product":null},{"updated_at":"2019-02-17 14:59:54","stars":5,"rating":1,"comment":"Highly recommend this service. A very cool guy and after sales services are beyond anyone's expectations. 5+ * for the seller","response":null,"product":null},{"updated_at":"2019-02-15 19:29:43","stars":5,"rating":1,"comment":"HDDDDDDDDDDDDDDD XDD ty \u2665","response":null,"product":null},{"updated_at":"2019-02-14 21:12:01","stars":5,"rating":1,"comment":"Great guy. Would highly recommend purchasing from him :D","response":null,"product":null},{"updated_at":"2019-02-13 09:02:24","stars":5,"rating":1,"comment":"thank you dude 100% trusted","response":null,"product":null},{"updated_at":"2019-02-13 09:02:05","stars":5,"rating":1,"comment":"so easy and legit 100%","response":null,"product":null},{"updated_at":"2019-02-12 00:54:40","stars":5,"rating":1,"comment":"Easy, simple, fast! ;) 5 stars","response":null,"product":null}],"online":{"state":false,"ago":"5 months ago"},"staff":false}}

Basically what I need is just the title of the items:

Object
>User
>>Products
>>>0
>>>>Title <------
>>>1
>>>>Title <------
>>>2
>>>>Title <------

Here is my code:

$.getJSON('results.json?nocache='+Math.random(), function(data) {
$.each(data, function () {
  $("table").append($("<tr>").append(
    $("<td>").addClass("Item Name").text(this.products[0].title),
  ));
});
});

The issue lies within this.products[0].title

I just need to extract the product name. I have tried many things, but for some reason I can't wrap my head around how to format it correctly to just grab titles.

I have tried many variants of the following:

this.products[0].title
this.products.title
this.user.products[0].title
etc.

Any help here would be more than appreciated.

Does this answer your question? [How to parse JSON data with jQuery / JavaScript?](https://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript) — devlin carnate, Feb 28 '20 at 20:39

score 2 · Accepted Answer · answered Feb 28 '20 at 20:37

Firstly products is under the user property. Secondly, you're trying to call $.each() on an object, so this will not be what you are expecting it to be.

To make the code simpler, just use a forEach() over data.user.products, like this:

data.user.products.forEach(product => $("table").append($("<tr>").append($("<td>").addClass("Item Name").text(product.title))));

That being said, having that many DOM operations in a loop isn't ideal. A better idea is to use map() to create a single HTML string which you can append once, like this:

var html = data.user.products.map(product => `<tr><td class="Item Name">${product.title}</td></tr>`).join('');
$('table').html(html);

let data = {"status":true,"user":{"username":"TestUser","avatar":"xxxxxx.jpg","rep":{"positive":13,"neutral":0,"negative":0},"products":[{"id":"3yvIJHl","title":"Your Way To Money Heaven E-Book","image":{"url":"xxxxx.png","path":"product_images\/xxxxx.png"},"quantity":{"min":1,"max":1000000},"price":10,"currency":"USD","stock_warning":0,"type":"file","stock":9223372036854775807},{"id":"Q1yLHMn","title":"Private e-whore method","image":{"url":"xxxxxx.jpeg","path":"xxxxxx.jpeg"},"quantity":{"min":1,"max":1000000},"price":15,"currency":"USD","stock_warning":0,"type":"file","stock":9223372036854775807},{"id":"fV4JCNi","title":"Test","image":null,"quantity":{"min":1,"max":1},"price":500,"currency":"USD","stock_warning":0,"type":"file","stock":9223372036854775807}],"groups":[],"feedbacks":[{"updated_at":"2019-03-06 02:02:00","stars":5,"rating":1,"comment":"Great.. all accounts working fine thanks","response":null,"product":null},{"updated_at":"2019-03-03 20:11:45","stars":5,"rating":1,"comment":"Very good service!","response":null,"product":null},{"updated_at":"2019-02-27 21:29:54","stars":5,"rating":1,"comment":"GREAT buyer i got netflix working...","response":null,"product":null},{"updated_at":"2019-02-22 13:26:03","stars":5,"rating":1,"comment":"great cheap and fast","response":null,"product":null},{"updated_at":"2019-02-21 22:26:55","stars":5,"rating":1,"comment":"very nice when my account wasnt working i sent him a message nice support.","response":null,"product":null},{"updated_at":"2019-02-18 20:52:04","stars":5,"rating":1,"comment":"HQ","response":null,"product":null},{"updated_at":"2019-02-17 20:42:16","stars":5,"rating":1,"comment":"Quick answers, great seller!","response":null,"product":null},{"updated_at":"2019-02-17 14:59:54","stars":5,"rating":1,"comment":"Highly recommend this service. A very cool guy and after sales services are beyond anyone's expectations. 5+ * for the seller","response":null,"product":null},{"updated_at":"2019-02-15 19:29:43","stars":5,"rating":1,"comment":"HDDDDDDDDDDDDDDD XDD ty \u2665","response":null,"product":null},{"updated_at":"2019-02-14 21:12:01","stars":5,"rating":1,"comment":"Great guy. Would highly recommend purchasing from him :D","response":null,"product":null},{"updated_at":"2019-02-13 09:02:24","stars":5,"rating":1,"comment":"thank you dude 100% trusted","response":null,"product":null},{"updated_at":"2019-02-13 09:02:05","stars":5,"rating":1,"comment":"so easy and legit 100%","response":null,"product":null},{"updated_at":"2019-02-12 00:54:40","stars":5,"rating":1,"comment":"Easy, simple, fast! ;) 5 stars","response":null,"product":null}],"online":{"state":false,"ago":"5 months ago"},"staff":false}};

var html = data.user.products.map(product => `<tr><td class="Item Name">${product.title}</td></tr>`).join('');
$('table').html(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table></table>

I clearly need to study more, I wasn't aware you could go about it this way. Thanks a ton for the info here. Really helped me out today. — Jason Waltz, Feb 28 '20 at 20:44

How to parse structured data within a json array using jquery?

1 Answers1