将JSON双重映射到列表

时间:2019-05-31 07:26:35

标签: json reactjs dictionary

我无法显示JSON中的数据。

我的JSON数据如下:

data1 = [
    {
        id:'1',
        name: 'one',
        on: [
            {
                id:'1.1',
                type: 'Anna',
            },
            {
                id:'1.2',
                type: 'John',
            },
        ],

    },
    {
        id:'2',
        name: 'two',
        on: [
            {
                id:'1.1',
                type: 'John',
            },
            {
                id:'1.2',
                type: 'Anna',
            },
        ],

    },
]

我正在通过axios从本地API获取JSON。这种方法在其他表中效果很好。使用此JSON,我尝试过这种方式:

getData = () => {
    axios
      .get("Localhost", { params : {token : this.state.token }})
      .then(response =>
        response.data.map(data1 => ({
          id: `${data1.id}`,
          name: `${data1.name}`,
          onid: `${data1.on.id}`,
          ontype: `${data1.on.type}`,
        }))
      )
      .then(data1 => {
        this.setState({ data1 });
      })
  }

然后在渲染中我尝试将其映射:

<ol>
    {data1.map(user => {
      const { id, name } = user;
      return (
        <li key={id}>
          {name}
          {data1.on.map(user2 => {
            const { onid, ontype } = user2;
            return <li key={onid}> {ontype}</li>;
          })}
        </li>
      );
    })}
  </ol>

但是data1.on的地图不起作用

我希望数据会像这样:

  1. 一个
    1. 安娜
    2. 约翰
  2. 两个
    1. 约翰
    2. 安娜

我应该怎么做?

2 个答案:

答案 0 :(得分:2)

我认为您只需要重新整理地图即可。尝试这样的事情:

  <ol>
    {this.state.data1.map(item => {
      return (
        <li>
          {item.name.toUpperCase()}
          <ol>
            {item.on.map(person => {
              return <li>{person.type}</li>;
            })}
          </ol>
        </li>
      );
    })}
  </ol>
);

这是沙箱:https://codesandbox.io/s/gallant-ellis-76bdv

答案 1 :(得分:0)

尝试像这样通过JSON映射:

<ol>
  {data1.map(user => {
    const { id, name, on } = user;
    return (
      <li key={id}>
        {name}
        <ol>
          {on.map(elem => {
            const { id, type } = elem;
            return <li key={id}>{type}</li>;
          })}
        </ol>
      </li>
    );
  })}
</ol>