Push a new field into an empty obj inside of a JSON payload that has been parsed

Question

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"
              }
            }
          ]
        }
      ]
    }
  ]
}

Answer 1

extra.push("newField":"false"); is invalid JavaScript, and won't compile. The else continue is unnecessary. There's no further statements after this one. You're trying to iterate over this.resultRecords to set names, but that's incorrect; names are several layers deep.

The first method should be:

setStudentName(){
    this.resultRecords.classes.forEach(
        (classRecord) => classRecord.classList.forEach(
            (record) => record.name.first = `${record.name.first} ${record.name.last}`
        )
    )
}

The second method should look more like:

setExtra() {
    this.resultRecords.classes.forEach(
        (classRecord) => classRecord.classList.forEach(
            (contact) => contact.extraActivities.forEach(
                (activity) => { activity.activityId? activity.newField = false: null }
            )
        )
    )
}

That said, I'm not entirely sure what you're trying to do, so there may be some errors in this logic, but hopefully it should get you a bit closer.