Question

我似乎无法从json数组的较低级别提取数据。我可以提取顶级数据，但是尝试进一步提取错误。我才刚刚开始学习API和React，因此将不胜感激。

[
  {
    containerId: 1,
    containerName: "Finance",
    containerDescription: null,
    vitems: [
            {
                itemId: 2,
                itemName: "Sun",
                itemDescription: null,
                itemType: "Maintain",
                itemTypeDescription: null,
                css: "darkgreen"
            },
            {
                itemId: 3,
                itemName: "Concur",
                itemDescription: null,
                itemType: "Maintain",
                itemTypeDescription: null,
                css: "darkgreen"
            },
            {
                itemId: 4,
                itemName: "Basware",
                itemDescription: null,
                itemType: "Maintain",
                itemTypeDescription: null,
                css: "darkgreen"
            }
        ]
    }
]

  componentDidMount() {
    const API_URL = 'http://localhost:5000/changeatdate/1/2019-07-01';

    fetch(API_URL)
      .then(results => {
        return results.json()
      })
      .then(data => {
        let items = data.map((i) => {
          return(
            <ul key={i.containerId} className='container'>
              <h1 key={i.containerId*0.1}>{i.containerName}</h1>
              <li key={i.containerName}></li>
            </ul>
          )
        })
        this.setState({items});
      })
  }
  render() {{this.state.items}}

以上方法有效（是的-我知道我需要对密钥进行排序...）。但是我如何使vitems出现在容器中？

我真的很困，我确定这很简单，所以希望有人可以帮助我。

我注意到的一件事是，我的json以[开头，而不是直接转到{。我正在使用sequelize，模型和'include'。

提前谢谢！

Answer 1

您可以使用这种简单的技术，使用多个for循环

用于循环主数组长度
for循环以获取vitems长度

我添加了一个片段

var x =  [{
 		containerId: 1,
 		containerName: "Finance",
 		containerDescription: null,
 		vitems: [{
 				itemId: 2,
 				itemName: "Sun",
 				itemDescription: null,
 				itemType: "Maintain",
 				itemTypeDescription: null,
 				css: "darkgreen"
 			},
 			{
 				itemId: 3,
 				itemName: "Concur",
 				itemDescription: null,
 				itemType: "Maintain",
 				itemTypeDescription: null,
 				css: "darkgreen"
 			},
 			{
 				itemId: 4,
 				itemName: "Basware",
 				itemDescription: null,
 				itemType: "Maintain",
 				itemTypeDescription: null,
 				css: "darkgreen"
 			}
 		]
 	},
 	{
 		containerId: 2,
 		containerName: "Technology",
 		containerDescription: null,
 		vitems: [{
 				itemId: 2,
 				itemName: "Sun",
 				itemDescription: null,
 				itemType: "Maintain",
 				itemTypeDescription: null,
 				css: "darkgreen"
 			},
 			{
 				itemId: 3,
 				itemName: "Concur",
 				itemDescription: null,
 				itemType: "Maintain",
 				itemTypeDescription: null,
 				css: "darkgreen"
 			},
 			{
 				itemId: 4,
 				itemName: "Basware",
 				itemDescription: null,
 				itemType: "Maintain",
 				itemTypeDescription: null,
 				css: "darkgreen"
 			}
 		]
 	}
 ]

//Iterate over main array
for(let i=0; i< x.length; i++){
  const vitemsLength = x[i].vitems.length;
  //Iterate over vitems array based on it's length
  for(let j=0; j < vitemsLength; j++){
    console.log(x[i].vitems[j]);
  }
}

Answer 2

您可以按照下面提到的方式遍历vitems：

<ul key={i.containerId} className='container'>
    <h1>{i.containerName}</h1>
    {
        i.vitems.map(el => <li key={el.itemId}>{el.itemName}</li>)
    }
</ul>

h1标签上不需要密钥。

在遍历json数组时遇到麻烦

2 个答案: