CODEWITHSUNDEEP
javascriptarraysreactjsjsx
invrt
invrt

Reputation: 709

Remove empty arrays from mapped Object

I'm displaying data on a grid using the snippet from below `

{this.state.rows.map((qc) => 
   <div className="column table">
       <div className="row label">
           <div className="column-label qc-number hover-false">{}</div>
               <div className="divider"></div>
                    <div className="column-label qc-date-label">{qc.CreatedOn.replace(",","")}</div>
                       <img className="info" src="../ClientApp/images/Info.svg"></img>
                                </div>
                                {qc.BinsByDayByOrchardsQCs.map((qc2) =>
                                    qc2.BinsByDayByOrchardsQCsDefects.map((qc3) =>
                                        <div onChange={this.removeEmpty} className="row table">{qc3.Count}</div>
                                 ))}
                                <div className="row table total">13</div>   
                            </div>)}

`

This returns quite a bit of data, so I've kinda made a simple console.log that reflects the data that I'm getting back.

{console.log("console", this.state.rows.map((qc) =>
    qc.BinsByDayByOrchardsQCs.map((qc2) =>
         qc2.BinsByDayByOrchardsQCsDefects)))}

Which returns 

0: []
1: []
2: []
3: [Array(4)]
4: [Array(4)]
5: [Array(4)]
6: [Array(4)]
7: []
8: []
9: [Array(4)]
10: []

As you can see, I'm getting quite a few empty objects, which React is rendering and displaying.. How do I remove these empty Objects? I'm aware of array.filter but I'm not sure how to apply it to my JSX

EDIT: Attempt at the first solution given

{console.log("console", this.state.rows.map((qc) =>
  qc.BinsByDayByOrchardsQCs.filter(({length}) => length > 0).map((qc2) =>
      qc2.BinsByDayByOrchardsQCsDefects)))}

returns 

0: []
1: []
2: []
3: []
4: []
5: []
6: []
7: []
8: []
9: []
10: []

Same results with the solution provided by @yourfavouritedev

Upvotes: 0

Views: 655

Answers (3)

Ewe Tek Min
Ewe Tek Min

Reputation: 865

I think you can filter the array first before loop

this.state.rows.filter(qc => qc.BinsByDayByOrchardsQCs.length > 0)
    .map(qc => qc.BinsByDayByOrchardsQCs
        .map(q2 => q2.BinsByDayByOrchardsQCsDefects
            .map(q3 => console.log(q3.count))));

If your BinsByDayByOrchardsQCsDefects will be empty too, then you can filter again.

this.state.rows.filter(qc => qc.BinsByDayByOrchardsQCs.length > 0)
    .map(qc => qc.BinsByDayByOrchardsQCs
        .filter(q2 => qc2.BinsByDayByOrchardsQCsDefects.length > 0)
    .map(q3 => q3.BinsByDayByOrchardsQCsDefects
        .map(q4 => console.log(q4.count))));

Upvotes: 2

Ele
Ele

Reputation: 33726

You can check for the attribute length.

this.state.rows.map(...).filter(({length}) => length > 0);

According to your approach

{console.log("console", this.state.rows.map((qc) =>
    qc.BinsByDayByOrchardsQCs.map((qc2) =>
      qc2.BinsByDayByOrchardsQCsDefects)).filter(({length}) => length > 0))}

Upvotes: 4

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

Array.filter would probably be your best option. In your case you would do something like.

 {(qc.BinsByDayByOrchardsQCs.map((qc2) => qc2.BinsByDayByOrchardsQCsDefects).filter((arrays) => arrays.length > 0 ).map((qc3) => {
   return (
     <div onChange={this.removeEmpty} className="row table">{qc3.Count}</div>
   )
})}

Let me know if that works out :)

Upvotes: 2

Related Questions