How to convert nested array of object into array of strings in Reactjs?

Question

I want to map and convert the below JSON structure to array of simple string but getting the undefined error while mapping.

JSON structure :

var yourArray = [ 
            {
            "options": [
                {
                    'id':1,
                    'name':'All'
                },{
                    'id':2,
                    'name':'Javascript'
                },{
                    'id':2000,
                    'name':'Ruby'
                }    
            ]
            }
        ];

Trying to map like this :

var newArray = yourArray.map( function( el ){ 
    yourArray.options.map( function( eln ){ 
      return eln.name; 
    })
});
console.log (newArray);

Note: Following this example How do I convert a javascript object array to a string array of the object attribute I want?

Code Maniac · Accepted Answer · 2019-02-10T07:20:19.453

1

Two issues you had in your code

There was no return var newArray = yourArray.map( function( el ){ el.options.map( function( eln ) here.
second yourArray.options you need to access using index or the el you're getting in your function call as argument.

var yourArray = [{"options": [{'id':1,'name':'All'},{'id':2,'name':'Javascript'},{'id':2000,'name':'Ruby'}]}];

var newArray = yourArray.map( function( el ){ 
  return el.options.map( function( eln ){ 
    return eln.name; 
  })
});
console.log (newArray);

UPDATE:

Thanks for the answer, sorry to bother you again, My actual JSON structure is like this { "brand": [ {"options": [{"catgeory_name": "Sigma"},{"catgeory_name": "Footner"}]} ] } How can we map this to get the output like this ["Sigma", "Footner"] Because I am still getting undefined error when I map

let data = { "brand": [ {"options": [{"catgeory_name": "Sigma"},{"catgeory_name": "Footner"}]} ] }

let op = data.brand[0].options.map(({catgeory_name})=>catgeory_name)

console.log(op)

edited Feb 10 '19 at 07:20

answered Feb 09 '19 at 13:42

Code Maniac

37,143
5
39
60

no need to user 2 map for this json. if we have multiple options only we need to use 2 map – Akhil Aravind Feb 09 '19 at 13:51
@AkhilAravind if you see i have just edited the code posted by op to show him what are the issues he had in his code. And there are fair chances that op has just posted a sample input but from his code it seems he's using it for a input which has array with more elements. – Code Maniac Feb 09 '19 at 13:53
i just showed you, thats all. in his json - he had only one option object. so we can `use array[index].option` – Akhil Aravind Feb 09 '19 at 13:56
@CodeManiac : Thanks for the answer, sorry to bother you again, My actual JSON structure is like this `{ "brand": [ {"options": [{"catgeory_name": "Sigma"},{"catgeory_name": "Footner"}]} ] }` How can we map this to get the output like this `["Sigma", "Footner"]` Because I am still getting undefined error when I map. I have the data in my prop like this `let filterbrandsnew = this.props.tvfilter.brand` – H.Husain Feb 10 '19 at 07:14

score 0 · Answer 2 · answered Feb 09 '19 at 13:45

here is the simple solution using map, since the option is inside the first index, you can user yourArray[0]

var yourArray = [ 
            {
            "options": [
                {
                    'id':1,
                    'name':'All'
                },{
                    'id':2,
                    'name':'Javascript'
                },{
                    'id':2000,
                    'name':'Ruby'
                }    
            ]
            }
        ];
        
var newArray = yourArray[0].options.map(i => i.name)
console.log(newArray)

How to convert nested array of object into array of strings in Reactjs?

2 Answers2