代码之家 › 专栏 › 技术社区 › Shane Harley

通过这些JSON元素进行映射

json javascript

Shane Harley · 技术社区 · 10 月前

对此有点纠结。我有一个json文件,看起来像下面这样,数组中嵌套了许多项。

"projects": [
    {
      "projectOne": {
        "id": "id1",
        "company": "company1",
        "heading": "heading",
        "link": "link",
        "heroImage": "imageLink"
      }
    },
        {
      "projectTwo": {
        "id": "id2",
        "company": "company2",
        "heading": "heading",
        "link": "link",
        "heroImage": "imageLink"
      }
    },

我想映射每个项目,所以我用它来访问JSON中的项目。我想为每一个命名,以便以后在其他地方更容易访问。

  const projects = props.cmsData.projects

  {projects.map(project => {
     return <WorkGridItem {...project} key={project.id} />
  })}

然后在我的组件中,我使用了这个

export default function WorkGridItem(props) {
  return (
    <div className={`${styles.item} fadeIn`} id={props.id}>
      <div>
        {props.heroImage && (
          <div className={`${styles.imageContainer}`}>
            <Image
              src={props.heroImage}
              fill
              alt={props.id} />
          </div>
        )
        }
      </div>

然而,它并没有访问元素。我大概知道为什么,因为它实际上只是通过标题“projectOne”、“projectTwo”等进行映射,但我不知道如何让它进入元素以获取id和heroImage。

1 回复 | 直到 10 月前

A l w a y s S u n n y 10 月前

首先,您需要转换数据结构,使其更容易使用-

const transformProjects = (projectsData) => {
  return projectsData.map(project => {
    const projectKey = Object.keys(project)[0];
    return project[projectKey];
  });
};

然后,在您的主组件中:

const ProjectGrid = (props) => {
  const projects = transformProjects(props.cmsData.projects);

  return (
    <div>
      {projects.map(project => (
        <WorkGridItem {...project} key={project.id} />
      ))}
    </div>
  );
};

最后,在WorkGridItem组件中保持不变

const WorkGridItem = (props) => {
  return (
    <div className={`${styles.item} fadeIn`} id={props.id}>
      <div>
        {props.heroImage && (
          <div className={`${styles.imageContainer}`}>
            <Image
              src={props.heroImage}
              fill
              alt={props.id} 
            />
          </div>
        )}
      </div>
    </div>
  );
};

这里的关键变化是 transformProjects 功能,其中:

拿走你的原件 projects 阵列
通过每个地图 project 对象
获取密钥(“ 项目一 ", " 项目二 “等)使用 Object.keys(project)[0] 最后返回该密钥中的实际项目数据

推荐文章

Sweepy Dodo · JSON lite的格式化

9 月前

SebMa · 为什么我用mikefarah/yq得到两倍的JSON输出?

10 月前

Dione Saturn · JSON、fetch、HTML中的javascript和未定义或空字符串[重复]

10 月前

user24242514 · 将嵌套查询字符串请求转换为字典

10 月前

Shane Harley · 通过这些JSON元素进行映射

10 月前

Milenko Markovic · 如何使用Python读取JSON?操作系统错误:[Errno 36]文件名太长:

10 月前

Shane Harley · 将HTML作为JSON字符串的一部分?

10 月前

user6631314 · 使用PHP从api响应中提取视频数据[复制]

10 月前

Matt Miles · 如何将嵌套的JSON转换为数据帧?

10 月前

ololo · 不支持目录导入

10 月前