Iterate over all Array indexes within array with map method Javascript

Question

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

This is what my JSON Data looks like..

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

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]

Can you make an StackBlitz or Codepen example to check the code? On the other hand, if you want to iterate not only on 0 you can do `this.state.rows.map((qc, index) => allothercode). Cheers, sigfried. — Rubén S. García
– Rubén S. García, Commented Apr 19, 2019 at 21:23

Christopher M Miller · Accepted Answer · 2019-04-19 21:35:24Z

3

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>
            )
        )
    )
}

edited Apr 19, 2019 at 21:35

answered Apr 19, 2019 at 21:24

Christopher M Miller

1327 bronze badges

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

1 Comment

invrt Over a year ago

Sorry for the late reply my man, but this is working perfectly...Cheers!

Collectives™ on Stack Overflow

Iterate over all Array indexes within array with map method Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related