Get Array from JSON in reactjs

Question

I have one problem. Anyone help me out. I am new to React so I am not able to debug it.

The problem is

When I print this.props.colors i.e.

console.log(this.props.colors)

I got below result.

{"colors": [["Red", true], ["Blue", false], ["Green", true], ["Black", true], ["White", false]]}

But I want it below form

0: (2) ["Red", true]
1: (2) ["Blue", false]
2: (2) ["Green", true]
3: (2) ["Black", true]
4: (2) ["White", false]

How can I get this? Anyone help me out.

Thank you.

I tried that too. But it prints undefined. I tried it as follows console.log(this.props.color.colors) prints {"colors": [["Red", true], ["Blue", false], ["Green", true], ["Black", true], [White", false]]} but console.log(this.props.color.colors ? this.props.color.colors.colors : '1111111' ) prints undefined Did I miss something? — Rich
– Rich, Commented May 12, 2020 at 10:32
@Rich try Object.assign(). Here is working example: codesandbox.io/s/hungry-cannon-793fm — zrna
– zrna, Commented May 12, 2020 at 10:49

costal oktopus · Accepted Answer · 2020-05-13 00:24:38Z

3

If data - this.props.colors is :

{
  "colors": [
     ["Red", true], 
     ["Blue", false], 
     ["Green", true], 
     ["Black", true], 
     ["White", false]]
}

try this.props.colors.colors[0] or this.props.colors['colors'][0]

answered May 12, 2020 at 5:45

costal oktopus

3292 silver badges12 bronze badges

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

1 Comment

this.props.colors['colors'][0]

Sabit Rakhim · Accepted Answer · 2020-05-14 13:09:40Z

1

Also you can format colors into more comfortable array.

Use const colors = Object.values(this.props.colors) then it will return array like

[
 Array(5)
    0: ["Red", true]
    1: ["Blue", false]
    2: ["Green", true]
    3: ["Black", true]
    4: ["White", false]
]

answered May 12, 2020 at 6:15

Sabit Rakhim

4683 silver badges12 bronze badges