Home » Javascript » Iterating over multiple arrays in JSON object in React

Iterating over multiple arrays in JSON object in React

Posted by: admin August 19, 2018 Leave a comment

Questions:

I’ve been trying to return the first object of the first array in my JSON object, but I’m having some trouble.

I want to return the name of the first “vitamins”, which is “Vitamin B2”, in an tag.

Here is my JSON object

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

And here is my code trying to map over it

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>
    )
  }
)}
Answers: