0

Trying to write a getter and setter method to simply update my JSON payload to have name.first be the student's first and last name so that way the lightning-button can show as their full name, this would be at studnet.name.first on the html.

I am able to view the data how it comes as of now, so name comes through for the students but I am struggling to figure out what am I missing here. I am unable to update the payload and unable to see after the for loop alert()s when I have them in my setStudentName() method. I am guessing that the setter hits the method but then fails and then kicks it out of it.

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>
                                </lightning-accordion-section>
                            </lightning-accordion>
                        </div>
                    </template>
                </lightning-accordion-section>
            </lightning-accordion>
        </div>
    </template>
</template>

JS:

import { LightningElement, api } from 'lwc';
import retrieveResultOutput from '@salesforce/apex/studentViewer.retrieveResultOutput';
export default class StudentViewer extends LightningElement{
         resultRecords;
    
         @api get resultOutput(){
              return this.resultRecords;
         }
    
         set resultOuput(records) {
              this.resultRecords = JSON.parse(JSON.stringify(records));
              this.setStudentName;
         }
    
         setStudentName(){
              for(let record of this.resultRecords){
              let first = record.name.first;
              let last = record.name.last;
              record.name.first = `${first} ${last}`;
              }
         }
    
         async connectedCallback(){
              let requestPayload ='{"data":"requested"}'
              this.resultOuput = await retrieveResultOutput({parameter:requestPayload})
         }
    }

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

Had to fix the method being called inside the setter. Was not targeting correct object in the array originally.

     setStudentName(){
          for(let record of this.resultRecords.classes){
               for(let student of record.classList){
                    let first = student .name.first;
                    let last = student .name.last;
                    student .name.first = `${first} ${last}`;
               }
          }
     }

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.