javascript - 在对象数组中,如何在 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”,其余值也具有键。
让我们假设我将products.json传递给一个函数。为了将没有前导零的数组打印到控制台,我必须调用console.log(props.products[0])
.
但我的问题是如何"type"
引用props.products[0]
. 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);
推荐阅读
- java - 我的 Spring Boot 项目导致 org.h2.jdbc.JdbcSQLIntegrityConstraintViolationException: NULL not allowed for column "ID",如何解决?
- javascript - 计算孩子总数和对象总数并分成不同的数组
- html - PowerShell从html解析电子邮件
- compilation - 符号表中是否有数组的标识符?
- python - tn.close 不会关闭 telnet 连接?
- python - 编写一个 Python 程序来打印以下数字序列(N 由用户输入):X + X^2/2!+ X^3/3!+... 最多第 N 个学期
- sql-server - 使用 VNET 部署 Azure 数据库部署管道
- python - 如何避免python无关进程之间的忙等待
- anylogic - 如何避免移动代理通过另一个代理而不是避免它?
- python - 使用 struct.pack 在 Python 中打包/解包一个 3 字节整数