javascript - 如何访问另一个 JSON 对象数组中的 JSON 对象数组的第一个元素?
问题描述
我有一个反应组件。它得到一个json
数组。
[
{
"itemNumber": "11BRC",
"itemDescription": "Flat head Phillips Wood screw C-Pak 2x1/4",
"featured": false,
"categoryName": "Screws",
"price": 4.74444444,
"qtyOnHand": 22409.00000,
"images": [
{
"itemnmbr": "11BRC",
"fileseq": 16384,
"filename": "Oval Head Slotted Wood Screws.jpg",
"imageData": "/9j/4Q4nRXhpZgAATU0AKgAAAAgADAEOAAIAAAAgAAAAngEPAAIAAAASAAAAvgEQAAIAAAAKAAAA0AESAAMAAAABAAEAAAEaAAUAAAABAAAA2gEbAAUAAAABAAAA4gEoAAMAAAABAAIAAAExAAIAAAAgAAAA6gEyAAIAAAAUAAABCgITAAMAAAABAAIAAIdpAAQAAAABAAABIIglAAQAAAABAAADBAAAAxggICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgAE5JS09OIENPUlBPUkFUSU9OAE5JS09OIEQxWAAALcbAAAAnEAAtxsAAACcQQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaAAyMDEyOjA0OjA1IDE0OjI1OjA2AAAAABmCmgAFAAAAAQAAAlKCnQAFAAAAAQAAAlqIIgADAAAAAQABAACQAAAHAAAABDAyMTCQAwACAAAAFAAAAmKQBAACAAAAFAAAAnaRAQAHAAAABAECAwCRAgAFAAAAAQAAAoqSBAAKAAAAAQAAApKSBQAFAAAAAQAAApqSBwADAAAAAQADAACSCgAFAAAAAQAAAqKShgAHAAAAMAAAAqqSkAACAAAAAzE3AACSkQACAAAAAzE3AACSkgACAAAAAzE3AACgAAAHAAAABDAxMDCgAQADAAAAAQABAACgAgAEAAAAAQAABzWgAwAEAAAAAQAABBqgBQAEAAAAAQAAAuSiFwADAAAAAQACAACjAAAHAAAAAQMAAACjAQAHAAAAAQEAAACjAgAHAAAACAAAAtoAAAAAAAAACgAABOIAAAAAAAAACjIwMTE6MDM6MTQgMTA6MTA6NTEAMjAxMTowMzoxNCAxMDoxMDo1MQAAAAAEAAAAAQAAAAAAAAAGAAAAAAAAAAoAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAICAQEAAAAAAgABAAIAAAAEUjk4AAACAAcAAAAEMDEwMAAAAAAAAAABAAAAAQAAAAQCAAAAAAAAAAAAAAYBAwADAAAAAQAGAAABGgAFAAAAAQAAA2YBGwAFAAAAAQAAA24BKAADAAAAAQACAAACAQAEAAAAAQAAA3YCAgAEAAAAAQAACqkAAAAAAAAASAAAAAEAAABIAAAAAf/Y/+0ADEFkb2JlX0NNAAH/7gAOQWRvYmUAZIAAAAAB/
...
在阅读了这些 StackOverflow 问题后如何访问 JSON 对象数组的第一个元素和访问 json 数组的第一个元素(还有更多),我制作了组件渲染函数:
render() {
const items = this.state.itemList;
return (
<table className="table table-striped table-bordered">
<thead>
<tr>
<th>Item Number</th>
<th>Item Description</th>
<th>Item Image</th>
</tr>
</thead>
<tbody>
{items && items.map (item =>
<tr key={item.itemNumber}>
<td>{item.itemNumber}</td>
<td>{item.itemDescription}</td>
<td><img className="fit-picture" src={"data:image/png;base64," + item.images[0].imageData} id={item.itemNumber + "Img"} alt={item.itemNumber} /></td>
</tr>
)}
</tbody>
</table>
);
}
...它说那item.images[0]
是未定义的。我什至尝试过Object.keys(item.images)[0].imageData
并且Object.entries(item.images)[0].imageData
每个都有类似的错误消息。有人愿意指出我做错了什么吗?
解决方案
中的某些条目itemList
可能没有图像,这将导致您看到的错误。为了解释这些条目,我们可以使用条件属性访问。
在渲染中尝试,这将在不存在item.images[0]?.imageData
时使执行短路。images[0]
该答案最初询问的JSON.parse(itemList)
是最高评论所指的内容。这不是 OP 遇到的问题。
推荐阅读
- next.js - 错误:无法加载配置“下一个”以从
- apache-kafka - 使用 Kafka 流有什么好处?
- amazon-web-services - AWS DMS - 检查时间范围内传输的数据量
- ios - 处理多个请求时的 ASAuthorizationController 问题
- python - Merge_asof 但只让最近的键合并
- mysql - Docker Joomla + MySQL 如何让 joomla 网站持久化
- javascript - 如何在momentjs中将开始时间设置为特定时间
- android-studio - 实现 OnBackPressedCallback 后获取默认 onBackPressed
- pyspark - 如何在 Pyspark 中使用 RandomForest 和 Word2Vec 从特征重要性映射单词
- algorithm - 重构使用变量的 switch 语句的最佳方法是什么