CODEWITHSUNDEEP
javascriptarraysreactjsfixed-data-table
cbll
cbll

Reputation: 7219

Refer to column value of nested Javascript array with React

I have a Javascript array example that I wish to visualize in a table.

Here's the array:

    var dataTable = [
        {   First:    {In: "5 MB", Out: "6 MB"},
            Second:    {In: "5 MB", Out: "1 MB"},
            Other:  {In: "0.2 MB", Out: "2 MB"}
        }
    ];

Using fixed-data-table in React, I wish to put this data into a table, where First, Second and Other are rows, and IN/OUT are columns.

Say I wish to populate a field with the "in" value, and afterwards, the "Out" value. Do I refer to the nested value as First[0].In and First[0].Out to retrieve it and show it in a specific cell?

Upvotes: 1

Views: 534

Answers (1)

ajm
ajm

Reputation: 20105

Your structure looks like an array (dataTable) containing a single element that is an object with keys named First, Second, and Other.

To access the In and Out properties of First, you would reference them like so: dataTable[0].First.In or dataTable[0].First.Out.

For, Second, you would follow the same pattern: dataTable[0].Second.In, etc.

Or, why not store the reference to dataTable[0] as a variable if you're going to be accessing its properties repeatedly?

var toShow = dataTable[0];
console.log(toShow.First.In);
console.log(toShow.Other.Out);

That should give you the general idea. You're indexing an array and then using an object's keys to access the data you want.

It looks to me like dataTable does not need to be an array at all if it's going to contain a single object with fixed keys; perhaps you want it to be an array of objects instead so you can index each one separately? That's up to you though as either way will work.

Upvotes: 2

Related Questions