迭代对象中的JavaScript数组以在HTML中显示
迭代对象中的JavaScript数组以在HTML中显示
提问于 2018-10-25 02:48:19
我有一个这样的JS对象：
{
promo_name: "value",
discount_type: "value",
discount: "value",
products: [
{ id: 1, name: 'name'},
{ id: 2, name: 'name'},
]
}我的目标是在视图中显示结果。我的问题是我不知道如何迭代对象中的数组。
数据来自一个Ajax请求，然后被解析成一个JS对象。
我使用jQuery $.each遍历res对象并显示属性值，如下所示：
$.each(res, function (key, value) {
$("#coupon_data").show();
$("#coupon_details").html(
'<div class="alert alert-success">' +
'<h4>Promotion Details</h4>' +
'<hr>' +
'<p>Promotion: ' + res.promo_name + '</p>' +
'<p>Discount type: ' + res.discount_type + '</p>' +
'<p>Amount: ' + res.discount + '%</p>' +
'</div>'
);
});将显示三个属性(res.promo_name、res.discount_type和res.discount)，但是因为数组长度不同，所以我不能这样显示它的值：
res.products[0].name res.products[1].name
我认为我需要遍历对象内部的数组，并显示它可能包含的元素的数量。这就是我被卡住的地方。
回答 6
Stack Overflow用户
发布于 2018-10-25 02:55:09
在常规的for循环之外，您还可以使用Array.forEach
var products = [
{ id: 123, name: 'name1',
{ id: 456, name: 'name2'
]
products.forEach(function(product) {
// do something with each product...
})
Stack Overflow用户
发布于 2018-10-25 02:55:09
你的对象有一些拼写错误。
{
promo_name: "value",
discount_type: "value",
discount: "value",
products: [
{ id: 1, name: 'name'},
{ id: 2, name: 'name'},
]
}获取对象内数组长度的示例：
var myObj = {
promo_name: "value",
discount_type: "value",
discount: "value",
products: [
{ id: 1, name: 'name'},
{ id: 2, name: 'name'},
]
};
//length of products
myObj.products.length;
//one product
myObj.products[0];
//id of one product:
myObj.products[0].id;Stack Overflow用户
发布于 2018-10-25 02:58:22
首先，您可以通过使用JS等效的StringBuilder来提高性能，它是一个数组，如下所示：
var h = [
'<div class="alert alert-success">',
'<h4>Promotion Details</h4>',
...
];
$("#coupon_details").html(h.join(''));其次，您只需要在属性上调用$.each，而不是调用$.each()，这是一个数组，如下所示：
$.each(res.products, function(i, product) {
h.push('<div class=product>', product.name, '</div>');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52976023
复制相关文章
相似问题
腾讯云开发者
