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-10 07:20:19Z

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, 2019 at 7:20

answered Feb 9, 2019 at 13:42

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

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

4 Comments

Akhil Aravind Over a year ago

no need to user 2 map for this json. if we have multiple options only we need to use 2 map

Code Maniac Over a year ago

@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.

Akhil Aravind Over a year ago

i just showed you, thats all. in his json - he had only one option object. so we can use array[index].option

H.Husain Over a year ago

@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

Akhil Aravind · Accepted Answer · 2019-02-09 13:45:30Z

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)

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related