如何使用 jquery 解析 json 数组中的结构化数据？

Posted 2023-05-08

【中文标题】如何使用 jquery 解析 json 数组中的结构化数据？

【英文标题】：How to parse structured data within a json array using jquery?

【发布时间】：2020-06-12 23:30:55

【问题描述】：

我在这里看了很多，似乎无法找到解决我的简单问题的方法。出于某种原因，json 数组让我感到困惑。基本上我正在创建一个列出项目名称的表。这是我的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

基本上我需要的只是项目的标题：

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

这是我的代码：

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

问题在于this.products[0].title

我只需要提取产品名称。我已经尝试了很多东西，但由于某种原因，我无法理解如何正确格式化它以获取标题。

我尝试了以下多种变体：

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

如有任何帮助，我们将不胜感激。

【问题讨论】：

这能回答你的问题吗？ How to parse JSON data with jQuery / javascript?

【参考方案1】：

首先products 在user 属性下。其次，你试图在一个对象上调用$.each()，所以this 不会是你所期望的。

为了使代码更简单，只需在data.user.products 上使用forEach()，如下所示：

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

话虽如此，在一个循环中拥有这么多 DOM 操作并不理想。更好的办法是使用map() 创建一个可以附加一次的 html 字符串，如下所示：

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>

【讨论】：

我显然需要学习更多，我不知道你可以这样做。非常感谢这里的信息。今天真的帮了我大忙。

没问题，很高兴为您提供帮助