How to iterate over array by key name and if keys are empty include them in loop js
Question
I have array like below:
{
"": [
{
"id": 3,
"branch": null,
"classification": null,
"theme": null,
"branch_id": null,
"classification_id": null,
"project_id": null,
"theme_id": null,
"projectname": "project tests",
"comment": "commentsss",
"customername": "alex",
"lead1id": 2,
"lead1percent": "2.0",
"lead2id": 2,
"lead2percent": "2.0",
"lead3id": 2,
"lead3percent": "3.0",
"lead_plans": [
{
"id": 1,
"lead_id": 3,
"addcosts": "3.0",
"fee": "3.0",
"plan2": "3.0",
"plan3": "2.0",
"probability": "3.0",
"year": "2020-02-12"
}
],
"offers": [
{
"id": 1,
"lead_id": 3,
"addcosts": "2.0",
"addcostsinfo": "some infoss",
"days": "2020-02-12",
"decision": "goodss",
"decisiondate": "2020-02-12",
"fee": "2.0",
"mail": "mail goes here",
"offerdate": "2020-02-12",
"paper": "xyz"
}
]
},
{
"lead1percent": 2,
"lead2percent": 2,
"lead3percent": 3
}
],
"Electrical": [
{
"id": 4,
"branch": "Electrical",
"classification": "Warm22",
"theme": "Lean",
"branch_id": 2,
"classification_id": 1,
"project_id": null,
"theme_id": 3,
"projectname": "TEST PROJECT",
"comment": "",
"customername": "tets cuso",
"lead1id": 2,
"lead1percent": "1.3",
"lead2id": 16,
"lead2percent": "4.5",
"lead3id": 1,
"lead3percent": "4.5",
"lead_plans": [
{
"id": 2,
"lead_id": 4,
"addcosts": "7.8",
"fee": "5.6",
"plan2": "2.3",
"plan3": "3.4",
"probability": "1.1",
"year": "2020-05-10"
},
{
"id": 35,
"lead_id": 4,
"addcosts": "6.9",
"fee": "2.7",
"plan2": "7.5",
"plan3": "3.6",
"probability": "1.7",
"year": "2008-12-09"
},
{
"id": 37,
"lead_id": 4,
"addcosts": "6.8",
"fee": "2.7",
"plan2": "8.3",
"plan3": "1.9",
"probability": "4.8",
"year": "2001-12-07"
}
],
"offers": [
{
"id": 2,
"lead_id": 4,
"addcosts": "8.6",
"addcostsinfo": "TEST",
"days": null,
"decision": "TEST",
"decisiondate": "2020-06-15",
"fee": "2.4",
"mail": "TEST",
"offerdate": "2020-05-12",
"paper": "TEST"
}
]
},
{
"lead1percent": 1.3,
"lead2percent": 4.5,
"lead3percent": 4.5
}
]
}
And I want to iterate over it to do listing like below:
The code I was trying before is:
{
leads_list.map((h, index) => {
const lead_plans_totals = h.lead_plans.reduce(
(accumulator, currentDau) => {
return {
probability: accumulator.probability + parseFloat((currentDau.probability || 0)),
plan2: accumulator.plan2 + parseFloat((currentDau.plan2 || 0)),
plan3: accumulator.plan3 + parseFloat((currentDau.plan3 || 0))
};
}, {
probability: 0,
plan2: 0,
plan3: 0
}
);
const offers_totals = h.offers.reduce(
(accumulator, currentDau) => {
return {
addcosts: accumulator.addcosts + parseFloat((currentDau.addcosts || 0)),
fee: accumulator.fee + parseFloat((currentDau.fee || 0))
};
}, {
addcosts: 0,
fee: 0
}
);
return <TableRow key={`mi-${index}`}
className={index % 2 == 0 ? 'grey_row' : ''}>
<TableCell align="right" colSpan={2}>
<IconButton onClick={() => this.launchEditLeadPlanOfferDialog(h)}>
<EditIcon/>
</IconButton>
<IconButton onClick={() => this.launchDeleteContactDialog(h.id)}>
<DeleteIcon/>
</IconButton>
</TableCell>
<TableCell align="right">{h.projectno}</TableCell>
<TableCell align="right">{h.customername}</TableCell>
<TableCell align="right">{h.projectname}</TableCell>
<TableCell align="right">{h.branch}</TableCell>
<TableCell align="right">{h.theme}</TableCell>
<TableCell align="right">{h.classification}</TableCell>
<TableCell align="right">{lead_plans_totals.probability}</TableCell>
<TableCell align="right">{lead_plans_totals.plan2}</TableCell>
<TableCell align="right">{lead_plans_totals.plan3}</TableCell>
<TableCell align="right">{offers_totals.addcosts}</TableCell>
<TableCell align="right">{offers_totals.fee}</TableCell>
<TableCell align="right">{h.lead1id}</TableCell>
<TableCell align="right">{h.lead1percent}</TableCell>
<TableCell align="right">{h.lead2id}</TableCell>
<TableCell align="right">{h.lead2percent}</TableCell>
<TableCell align="right">{h.lead3id}</TableCell>
<TableCell align="right">{h.lead3percent}</TableCell>
<TableCell align="right">{h.comment}</TableCell>
</TableRow>
})
}
Currently, with this above array it gives me error like:
TypeError: leads_list.map is not a function
LeadsSearchResults.render
src/container/Leads/LeadsSearchResults.js:397
394 | <TableCell align="right">Kommentar</TableCell>
395 | </TableRow>
396 | </TableHead>
> 397 | <TableBody>
| ^ 398 | {
399 | leads_list.map((h, index) => {
400 | const lead_plans_totals = h.lead_plans.reduce(
I tried using forEach too but similar results are coming up. I think the problem is that it contains empty key but I am not sure how to iterate them using keys and sum arrays.
2 answers
solution1
1 ACCPTED 2020-05-14 19:44:10
Your problem is that your data is an Object and not an array. You first need to get the keys and then you can map over it.
Object.keys(leads_list).map(key => {
const h = leads_list[key][0];
... the rest of your code ...
});
solution2
0 2020-05-15 15:12:58
Based on @Long answer,
I got the basic understanding and below is my final code.
I am going to accept his answer as it has given me right direction.
{
Object.keys(leads_list).map((key, index) => {
console.log(' KEY::: ', key)
console.log(' leads_list[key]::: ', leads_list[key])
return leads_list[key].map((h, index) => {
console.log(' leads_lists::: if ', h)
if (index < leads_list[key].length - 1) {
const lead_plans_totals = h.lead_plans.reduce(
(accumulator, currentDau) => {
return {
probability: accumulator.probability + parseFloat((currentDau.probability || 0)),
plan2: accumulator.plan2 + parseFloat((currentDau.plan2 || 0)),
plan3: accumulator.plan3 + parseFloat((currentDau.plan3 || 0))
};
}, {
probability: 0,
plan2: 0,
plan3: 0
}
);
const offers_totals = h.offers.reduce(
(accumulator, currentDau) => {
return {
addcosts: accumulator.addcosts + parseFloat((currentDau.addcosts || 0)),
fee: accumulator.fee + parseFloat((currentDau.fee || 0))
};
}, {
addcosts: 0,
fee: 0
}
);
return (<TableRow key={`mi-${index}`}
className={index % 2 == 0 ? 'grey_row' : ''}>
<TableCell align="right" colSpan={2}>
<IconButton
onClick={() => this.launchEditLeadPlanOfferDialog(h)}>
<EditIcon/>
</IconButton>
<IconButton
onClick={() => this.launchDeleteContactDialog(h.id)}>
<DeleteIcon/>
</IconButton>
</TableCell>
<TableCell align="right">{h.projectno}</TableCell>
<TableCell align="right">{h.customername}</TableCell>
<TableCell align="right">{h.projectname}</TableCell>
<TableCell align="right">{h.branch}</TableCell>
<TableCell align="right">{h.theme}</TableCell>
<TableCell align="right">{h.classification}</TableCell>
<TableCell align="right">{lead_plans_totals.probability}</TableCell>
<TableCell align="right">{lead_plans_totals.plan2}</TableCell>
<TableCell align="right">{lead_plans_totals.plan3}</TableCell>
<TableCell align="right">{offers_totals.addcosts}</TableCell>
<TableCell align="right">{offers_totals.fee}</TableCell>
<TableCell align="right">{h.lead1id}</TableCell>
<TableCell align="right">{h.lead1percent}</TableCell>
<TableCell align="right">{h.lead2id}</TableCell>
<TableCell align="right">{h.lead2percent}</TableCell>
<TableCell align="right">{h.lead3id}</TableCell>
<TableCell align="right">{h.lead3percent}</TableCell>
<TableCell align="right">{h.comment}</TableCell>
</TableRow>)
} else {
console.log(' leads_lists::: else ', h)
return (<TableRow>
<TableCell align="left"></TableCell>
<TableCell align="left" colSpan={7}>{key}</TableCell>
<TableCell align="right">{h.lead1percent}</TableCell>
<TableCell align="right">{h.lead2percent}</TableCell>
<TableCell align="right">{h.lead3percent}</TableCell>
</TableRow>)
}
})
})
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
iterate over json array - how to get the name / key of collection
Svelte iterate over array of keys and get key from object
Loop Over Array of Objects and Combine them if they have similar keys
iterate over array with JS
Iterate loop over state object with an array key in React
How to iterate a forEach over an object/array/key values from axios in JS (make DRY)?
How to iterate over an Array of objects with Ext.iterate (or JS)?
How to loop over objects and push the keys into an array?
How to iterate over a dictionary of arrays (without knowing the key name)
How do I iterate over an array of objects match a common element from another array and return the key value for “name”
Related Tags