时间戳

首页 > 解决方案 > 将json对象中的多个对象获取到数据网格

reactjs - 将json对象中的多个对象获取到数据网格

问题描述

我正在开发一个将 React 与 typescript 和 materialUi 一起使用的项目，我应该从 json fetch 中获取数据到 DataGrid 对象中。

JSON看起来像这样

{
  id: "1234567890",
  number: "123456789",
  description: "thingy",
  location: "im here",
  startFrom: "today",
  objects: [
    {
      stuffId: "1234567890",
      name: "this is my name",
      description: null,
      part: null,
      
    },
    {
      stuffId: "1234567890",
      name: "this is my name",
      description: null,
      part: null,
      
    }
  ]
}

那么问题来了，如何将json里面的“objects”列表里面的两个对象变成一个对象呢？编辑：这是与 TS 相关的，我希望在编写答案时考虑到 TS。

数据网格中的预期输出将是数据网格在其正确标题下列出两个对象。（我本来想上传一张图片来更好地解释它，但显然我需要 10 声望和 9 大声笑）

我尝试了很多东西，但都没有奏效，如果我列出所有内容，这篇文章会太长。我用我的 axios 方法正确地获取数据：const [data, setData] = useState<AxiosResponse | null>(null);

const values = data?.data.objects;

上面的代码记录了正确的数据，但我似乎无法弄清楚如何在数据网格中显示它。

标签： reactjstypescriptmaterial-ui

解决方案

像这样的东西？

  const data = {
      id: '1234567890',
      number: '123456789',
      description: 'thingy',
      location: 'im here',
      startFrom: 'today',
      objects: [
        {
          stuffId: '1234567890',
          name: 'this is my name',
          description: null,
          part: null,
        },
        {
          stuffId: '1234567890',
          name: 'this is my name',
          description: null,
          part: null,
        },
      ],
    };

    const valueIwant = data.objects.map((x) => {
      const { stuffId, name } = x;
      return {
        stuffId,
        name,
      };
    });

    console.log('valueIwant', valueIwant);

推荐阅读