Refer to column value of nested Javascript array with React

Question

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?

ajm · Accepted Answer · 2017-01-10 13:28:54Z

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.

Collectives™ on Stack Overflow

Refer to column value of nested Javascript array with React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related