在 React 中遍历 JSON 对象中的多个数组答案

【问题标题】：Iterating over multiple arrays in JSON object in React在 React 中遍历 JSON 对象中的多个数组
【发布时间】：2018-10-31 18:22:02
【问题描述】：

我一直试图在我的 JSON 对象中返回第一个数组的第一个对象，但我遇到了一些麻烦。

我想在标签中返回第一个“维生素”的名称，即“维生素 B2”。

这是我的 JSON 对象

{
  "nutrients": {
    "vitamins": [{
      "name": "Vitamin B2",
      "current": "1.7"
    },
    {
      "name": "Vitamin B6",
        "current": "10.9"
    }],
      "minerals": [{
        "name": "Zinc",
        "current": "1.7"
    }]
  }
}

这是我试图映射它的代码

import nutrients from '../../vitamins.json';

renderData() {
  return Object.keys(nutrients).map((nutrient, index) => {
    console.log('it works', nutrient[0].name, index);
    return (
      <option value="" key={index}>{nutrient[0].name}</option>
    )
  }
)}

【问题讨论】：

"营养素['维生素'][0].name"这就够了
JSON Object 中没有数组。
在对其进行任何操作之前，您需要将该 JSON 解析为真正的 JS 对象。

标签： javascript arrays reactjs object ecmascript-6

【解决方案1】：

var a ={
  "nutrients": {
    "vitamins": [{
      "name": "Vitamin B2",
      "current": "1.7"
    },
    {
      "name": "Vitamin B6",
        "current": "10.9"
    }],
      "minerals": [{
        "name": "Zinc",
        "current": "1.7"
    }]
  }
}

console.log(a.nutrients['vitamins'][0].name)

【讨论】：

太好了，这行得通。谢谢。现在如果我想返回所有的名字怎么办？如果我执行 console.log(micros.nutrients['vitamins'].name)，我会得到“未定义”。
a.nutrients['vitamins'].forEach(item =>{ console.log(item.name) });

【解决方案2】：

假设整个对象在 state.data 中

`render(){
 const {vitamins}=this.state.data.nutrients;
 vitamins.map((item,index)=>{
     if(index === 0)
     {    return (<div>item.name</div>)
     }`
  })
 }`

输出将打印维生素 B2

【讨论】：

非常感谢，这有帮助。
在 const {vitamins} 中将 {vitamins} 包裹在花括号中的原因是因为它是一个对象的名称，所以它必须包裹在 {} 中？
@bigjohnjr 这是一个 ES6 简写。
const {vitamins} =this.state.data.nutrients 展开后变为this.state.data.nutrients.vitamins。这是同一件事，但它有助于代码清晰和易于理解。

【解决方案3】：

你可以使用如下逻辑：

let nutrientObj = {
  "nutrients": {
    "vitamins": [{
      "name": "Vitamin B2",
      "current": "1.7"
    },
    {
      "name": "Vitamin B6",
        "current": "10.9"
    }],
      "minerals": [{
        "name": "Zinc",
        "current": "1.7"
    }]
  }
}

let nutrients = nutrientObj.nutrients;
let firstElement = nutrients[Object.keys(nutrients)[0]];

console.log(firstElement && firstElement.length ? firstElement[0].name : "")

【讨论】：

【解决方案4】：

你可以在 ES6 中使用解构，以此作为参考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring

import nutrients from '../../vitamins.json'
renderData() {
  const { nutrients: { vitamins: [{ name: vitaminName }] }  } = nutrients; //it destructures the given object, it will directly fetch the vitamin B2.
  console.log("Vitamin Name is = "+vitaminName)
  <option value="">{vitaminName}</option>
}

【讨论】：