json - 循环遍历 JSON 对象数组,其中 JSON 对象嵌套在其中
问题描述
更新:非常感谢,阿努普!我花了几个小时在这...
我正在获取一些嵌套的 graphql 数据,并且我相信“portProjectHolder”的原始 const 是我可以通过 . 符号。
使用我的console.log(portProjectHolder)
,我收到一个包含 2 个 JSON 对象的数组 - 这 2 个 json 对象内部都有一个对象,我需要从中获取属性并将它们映射到卡片组件。但是,我目前不知道如何做到这一点。
这是我在控制台上得到的响应:
控制台.log(portProjectHolder):
[
{
"portfolioProjects": {
"projectTitle": "Sample Project 2",
"description": "Project description...sample number 2...hope this works...",
"image1": {
"sourceUrl": "https://travelweird.com/wp-content/uploads/2021/05/dribble-cultivate-icon.png"
},
"image2": null,
"image3": null,
"image4": null
}
},
{
"portfolioProjects": {
"projectTitle": "Sample Project 1",
"description": "Project description...here's some text, let's see what ya do with it. ",
"image1": {
"sourceUrl": "https://travelweird.com/wp-content/uploads/2021/05/complab123-scaled.jpg"
},
"image2": null,
"image3": null,
"image4": null
}
}
]
我需要遍历并映射其中的对象
完整代码:
import React from "react"
import { graphql } from "gatsby"
import Card from '../components/Card/Card'
export default function Home({ data }) {
let portProjectHolder = data.wordPress.projects.nodes
console.log(portProjectHolder)
return (
<div>
{/* <portProjectHolder.map(portProject => { */}
<Card
key={portProjects.projectTitle}
title={portProjects.projectTitle}
description={portProjects.description}
image={portProjects.sourceUrl}
/>
{/* I can't for the life of me figure out how to map twice nested objects from an array...*/}
</div>
)
}
解决方案
假设,portfolioProjects 不是一个数组,那么解决方案将是,
<div>
{portProjectHolder.map((portProject) => {
const project = portProject.portfolioProjects;
return (
<Card
key={project.projectTitle}
title={project.projectTitle}
description={project.description}
image={project.sourceUrl}
/>
);
})}
</div>