Iterating over multiple arrays in JSON object in React

Question

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

You need to parse that JSON into a real JS object before doing any manipulation on it. — Thomas Hennes
– Thomas Hennes, Commented May 22, 2018 at 5:13

Akhil Aravind · Accepted Answer · 2018-05-22 04:52:03Z

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)

answered May 22, 2018 at 4:52

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John White Over a year ago

Great, this works. Thanks. Now what if I want to return all of the names? If I do console.log(micros.nutrients['vitamins'].name), I get "undefined".

Akhil Aravind Over a year ago

a.nutrients['vitamins'].forEach(item =>{ console.log(item.name) });

Erick · Accepted Answer · 2018-05-22 04:56:06Z

0

Assuming the entire object to be in state.data

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

the output will print Vitamin-B2

answered May 22, 2018 at 4:56

Erick

1,1461 gold badge12 silver badges25 bronze badges

4 Comments

John White Over a year ago

Thanks a lot, this helped.

John White Over a year ago

The reason why you wrapped {vitamins} in a curly brace in const {vitamins} is because it's the name of an object, so it has to be wrapped in {}?

Erick Over a year ago

@bigjohnjr it is an ES6 shorthand.

Erick Over a year ago

const {vitamins} =this.state.data.nutrients when expanded becomes this.state.data.nutrients.vitamins. It's the same thing but it helps in code clarity and ease of understanding.

Raeesaa · Accepted Answer · 2018-05-22 05:01:52Z

0

You could use logic something like below:

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 : "")

answered May 22, 2018 at 5:01

Raeesaa

3,3262 gold badges24 silver badges46 bronze badges

Comments

Jeeva · Accepted Answer · 2018-05-22 07:14:04Z

0

You may use destructuring in ES6, use this as reference 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>
}

answered May 22, 2018 at 7:14

Jeeva

1,59012 silver badges17 bronze badges

Collectives™ on Stack Overflow

Iterating over multiple arrays in JSON object in React

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related