Been struggling with this for some time now and would appreciate any insight you guys have..

This is what my JSON Data looks like..enter image description here

BinsByDayByOrchardsQCs [Array] > BinsByDayByOrchardsQCsDefects [Array]

I need to display each "Defect" on a grid table, which is inside the array of BinsByDayByOrchardsQCsDefects which will look something like this enter image description here

What I have so far is {this.state.rows.map((qc) => <div className="row table">{qc.BinsByDayByOrchardsQCs[0].BinsByDayByOrchardsQCsDefects[0].Defect}</div>

This currently returns Hail Damage, Sunburn, Sunburn, Sunburn, my question to you guys is how do I return all the defects from the whole array not just [0]

1 Answers

3
Christopher M Miller On Best Solutions

I like using Lodash for collection manipulation.

But you could also use nested maps:

{
    this.state.rows.map((qc) =>
        qc.BinsByDayByOrchardsQCs.map((qc2) =>
            qc2.BinsByDayByOrchardsQCsDefects.map((qc3) =>
                <div className="row table">
                    {qc3.Defect}
                </div>
            )
        )
    )
}