Trying to target the empty obj inside of my JSON payload
I am parsing with my setter to add a field that my HTML
can target to render "No activities" under the lightning-accordion
inside of the for:each={student.extraActivites}
. This is because I would like to display something instead of showing nothing, but if I try showing if:false=activity.activityId will give null or undefined for the UI so it will not render. Provided HTML to get more of the idea. Trying to get if:false={newField}
to get rendered but am struggling to find proper solution to add the new field in an empty obj
inside of my JSON payload
.
HTML:
<template>
<template for:each={outputResult.classes} for:item="classRecord">
<div key={classRecord.classNumber}>
<lightning-accordion>
<lightning-accordion-section label={classRecord.classNumber}>
<template for:each={classRecord.classList} for:item="student">
<div key={student.id}>
<lightning-button variant="base" label={student.name.first}>
</lightning-button>
<div>{student.phone.number}|{student.email}</div>
<lightning-accordion for:each={student.extraActivites} for:item="activity" key={activity.id}>
<lightning-accordion-section label="Involved Activities">
<div>{activity.name.activityName}</div>
<div if:false={newField}>No activites</div>
</lightning-accordion-section>
</lightning-accordion>
</div>
</template>
</lightning-accordion-section>
</lightning-accordion>
</div>
</template>
</template>
JavaScript:
@api get resultOutput(){
return this.resultRecords;
}
set resultOuput(records) {
this.resultRecords = JSON.parse(JSON.stringify(records));
this.setStudentName();
this.setExtra();
}
setStudentName(){
for(let record of this.resultRecords){
let first = record.name.first;
let last = record.name.last;
record.name.first = `${first} ${last}`;
}
}
setExtra(){
for(let record of this.resultRecords.classes){
for(let student of record.classList){
for(let extra of student){
if(!extra.activityId){
extra.push("newField":"false");
} else {
continue;
}
}
}
}
}
JSON:
{
"classes": [
{
"classNumber": 1,
"classList": [
{
"name": {
"first": "tristan",
"last": "berger"
},
"id": 1,
"email": "[email protected]",
"phone": {
"number": "1112223456"
},
"extraActivites": [
{
"activityId": 1,
"name": {
"activityName": "baking"
}
}
]
},
{
"name": {
"first": "eric",
"last": "cartman"
},
"id": 2,
"email": "[email protected]",
"phone": {
"number": "1112223457"
},
"extraActivites": []
}
]
},
{
"classNumber": 2,
"classList": [
{
"name": {
"first": "john",
"last": "doe"
},
"id": 3,
"email": "[email protected]",
"phone": {
"number": "1112223477"
},
"extraActivites": [
{
"activityId": 2,
"name": {
"activityName": "baking"
}
}
]
}
]
}
]
}