nested array of object using map es6 doesn't work in jsx

Question

I don't see any error but a blank jsx using es6 map over a nested array of object.

my data

const data = [
  {
    "name": "Main Food",
    "categories": [
      {
        "name": "Sub Food",
        "nature_of_business": [
          {
            "name": "Wholesaler"
          },
          {
            "name": "Direct sales"
          }
        ]
      }
    ]
  }
]

Jsx

<div>
  natural of business: {
    (data.categories || [])
      .map(o2 => o2.nature_of_business || [])
      .map(o3 => o3.name)
      .join(', ')
  }
</div>

Rodius · Accepted Answer · 2018-02-12 11:29:16Z

3

You're mapping the data incorrectly. You have to get the first item of the array, not data.categories:

Edit: Re-written for easier ES6 reading.

 <div>
    natural of business: {
       data[0].categories.map(category => category.nature_of_business.map(cat => 
           <div>{cat.name}</div>
       ))
    }
 </div>

Snippet of the mapping:

const data = [
  {
    "name": "Main Food",
    "categories": [
      {
        "name": "Sub Food",
        "nature_of_business": [
          {
            "name": "Wholesaler"
          },
          {
            "name": "Direct sales"
          }
        ]
      }
    ]
  }
];

data[0].categories.map(category => category.nature_of_business.map(cat => console.log(cat.name)));

edited Feb 12, 2018 at 11:29

answered Feb 12, 2018 at 10:46

Rodius

2,32117 silver badges20 bronze badges

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

3 Comments

Sharon Chai Over a year ago

I want print the value in jsx

Rodius Over a year ago

@SharonChai just add a <div> container for the cat.name that is returned from the last map and it should print your values in jsx :) like this => <div>{cat.name}</div>

Sharon Chai Over a year ago

ouch I didn't realised I need to have map within map.

Collectives™ on Stack Overflow

nested array of object using map es6 doesn't work in jsx

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related