遍历 JSON 个对象的数组，其中嵌套了 JSON 个对象

Question

更新：非常感谢，Anoop！我在这上面花了几个小时...

我正在获取一些嵌套的 graphql 数据，我相信“portProjectHolder”的原始常量是我可以通过 .表示法。

在我的 console.log(portProjectHolder) 中，我收到一个包含 2 个 JSON 对象的数组 - 这 2 个 json 对象中的每一个都有一个对象，我需要从中获取属性并将它们映射到卡片组件。但是，我现在不知道该怎么做。

这是我在控制台上得到的响应：

console.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>
  )
}

Answer 1

假设 portfolioProjects 不是一个数组，那么解决方案就是，

<div>
      {portProjectHolder.map((portProject) => {
        const project = portProject.portfolioProjects;
        return (
          <Card
            key={project.projectTitle}
            title={project.projectTitle}
            description={project.description}
            image={project.sourceUrl}
          />
        );
      })}
    </div>

遍历 JSON 个对象的数组，其中嵌套了 JSON 个对象

Looping over an array of JSON objects, with JSON objects nested inside of them

json

loops

reactjs

graphql

gatsby