How to access an array within an array without keys in React?

Question

This is the data being sent from the server:

[[10031,2],[10054,1],[10141,3],[10247,4],[10266,1],[10278,1],[10336,1],[10509,5],[10743,2],[12159,3],[12185,2],[12186,2],[12189,1],[12233,1],[12271,2],[12335,1],[12520,3],[12521,5],[12541,1]]

The 5-digit number is an ID, and the single digit number is a quantity. If there were keys, it would be easier to access, but I only have values. I want to access the ID and the quantity separately. I also want to put all IDs into one array, and all quantities into a parallel array.

Here is what I have tried so far that sort of accesses the values separately:

    for (let i = 0; i < this.state.chartData.length; i++) {
      for (let j = 0; j < this.state.chartData[i].length; j++) {
        console.log(this.state.chartData[i][j]);
      }
    }

The above code returns this in the console:

Trying to set the state to this however results in an error. I'm currently trying to teach myself react, so I'm not as familiar with my options and have been struggling to find a solution.

I feel like I might be missing something obvious here. I also likely have the option to do this in the backend in spring boot/java and then return that.

@BurakGavas ``` for (let i = 0; i < this.state.chartRawData.length; i++) { for (let j = 0; j < this.state.chartRawData[i].length; j++) { this.setState({ chartKey: this.state.chartRawData[i][j] }); } } ``` This results in a maximum update depth exceeded — Matt
– Matt, Commented Mar 18, 2020 at 13:35
It is not good to call 'setState' many times. Instead set your state as data once. If data is not appropriate to use in your chart, then restructure the data accordingly and set state. — Burak Gavas
– Burak Gavas, Commented Mar 18, 2020 at 13:37
That's not "an array within an array object without keys". That's just an array of arrays (aka a multidimensional array). If you just want to convert that to an array of objects, see Javascript - convert array of arrays into array of objects with prefilled values — Heretic Monkey
– Heretic Monkey, Commented Mar 18, 2020 at 13:38
It's a bit unclear what you need to do with the data and why you even need to set state with it. Seems the existing shape is sufficient for rendering by simply mapping over the array and using array destructuring to get the vars like data.map(([id, quantity]) => <Bar label={id} quantity={quantity} /> — Jon Wyatt
– Jon Wyatt, Commented Mar 18, 2020 at 15:59

Vishnu · Accepted Answer · 2020-03-18 13:41:04Z

1

const obj = Object.fromEntries(yourData);
console.log(obj) // {10031: 2, 10054: 1, 10141: 3, .... }

I also want to put all IDs into one array, and all quantities into a parallel array.

const keys = Object.keys(obj); // Array of keys [10031, 100254...]
const values = Object.values(obj); // Array of values [2,1, ...]

edited Mar 18, 2020 at 13:41

answered Mar 18, 2020 at 13:38

Vishnu

1,7311 gold badge17 silver badges28 bronze badges

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

1 Comment

Matt Over a year ago

Yup this works! Was not aware of the Object.fromEntries method

Collectives™ on Stack Overflow

How to access an array within an array without keys in React?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related