![](/img/trans.png)
[英]How do i change the value of each property in an array with objects and return it?
[英]In an array of Objects, how do I return all Objects by property in React?
我想要做的是创建一个多复选框过滤器。 因此,当我单击标题为“附件”的复选框时,它会返回属性“类型”下包含值“附件”的所有项目。 但在我这样做之前,我需要了解如何正确操作和遍历我的数据。
我有一个名为products的 json 文件,其中包含商店的所有产品,看起来像这样。
[
{
"id" : 1,
"name" : "Net and Post Set",
"type" : "Accessories",
"price" : 35,
"desc" : "It's a solid blade. 11111"
},{
"id" : 10,
"name" : "Platinum 3* Balls (Bag of 36)",
"type" : "Balls",
"price" : 12,
"desc" : "It's a solid blade. 11111"
},{
"id" : 22,
"name" : "Galaxy MC2",
"type" : "Blades",
"category" : "Composite",
"price" : 60,
"desc" : "It's a solid blade. 11111"
},
{
"id" : 23,
"name" : "Oversized Carbon fl, st",
"type" : "Blades",
"category" : "Composite",
"price" : 32,
"desc" : "It's a solid blade. 11111"
}
]
但是当我在控制台中打印出来时,它是一团糟。 首先,它作为数组中的数组打印。 其次,该嵌套数组具有键“0”,并且值的 rest 也具有键。
让我们假设我将products.json传递给 function。 为了将没有前导零的数组打印到控制台,我必须调用console.log(props.products[0])
。
但我的问题是如何引用props.products[0]
中所有对象的"type"
属性。 props.products[0].type
返回未定义。 这意味着我必须逐步检查每个项目?
您可以将Array#map
与解构一起使用。
const props = { products: [ [{ "id": 1, "name": "Net and Post Set", "type": "Accessories", "price": 35, "desc": "It's a solid blade. 11111" }, { "id": 10, "name": "Platinum 3* Balls (Bag of 36)", "type": "Balls", "price": 12, "desc": "It's a solid blade. 11111" }, { "id": 22, "name": "Galaxy MC2", "type": "Blades", "category": "Composite", "price": 60, "desc": "It's a solid blade. 11111" }, { "id": 23, "name": "Oversized Carbon fl, st", "type": "Blades", "category": "Composite", "price": 32, "desc": "It's a solid blade. 11111" } ] ] }; const types = props.products[0].map(({type})=>type); console.log(types);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.