0

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@gmail.com",
          "phone": {
            "number": "1112223456"
          },
          "extraActivites": [
            {
              "activityId": 1,
              "name": {
                "activityName": "baking"
              }
            }
          ]
        },
        {
          "name": {
            "first": "eric",
            "last": "cartman"
          },
          "id": 2,
          "email": "email2@gmail.com",
          "phone": {
            "number": "1112223457"
          },
          "extraActivites": []
        }
      ]
    },
    {
      "classNumber": 2,
      "classList": [
        {
          "name": {
            "first": "john",
            "last": "doe"
          },
          "id": 3,
          "email": "email3@gmail.com",
          "phone": {
            "number": "1112223477"
          },
          "extraActivites": [
            {
              "activityId": 2,
              "name": {
                "activityName": "baking"
              }
            }
          ]
        }
      ]
    }
  ]
}

1 Answer 1

0

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.

1
  • im trying to add a blank field so that the UI can render "no extra activities" for when the student doesnt have any. So basically give it something to hit to display something. I tried doing a if:false=activity.activityId but that does not register as I am guessing it is reading it as undefined on the empty obj inside the payload. That is why I am trying to add in this field. Jan 14 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.