0

I am receiving an undefined error over my for:each block in my lwc HTML.

I am unsure why QuestionChoices is undefined as it's a key on the surveyQuestion object.

Parent Component: surveyQuestions is set to my JSON payload returned from APEX.

<template if:true={surveyQuestions}>
          <template for:each={surveyQuestions} for:item="surveyQuestion">
            <div key={surveyQuestion.id}>
              <c-survey-translation-child
                question-name={surveyQuestion.QuestionName}
                question-type={surveyQuestion.QuestionType}
              >
              </c-survey-translation-child>
              <template if:true={surveyChoiceButton}>
                <template
                  for:each={surveyQuestion.QuestionChoices}
                  for:item="responseOption"
                >
                  <c-survey-question-response
                    response-option-name={responseOption.Name}
                    key={responseOption.id}
                  >
                  </c-survey-question-response>
                </template>
              </template>
            </div>
          </template>
        </template>

Survey Question Response Component HTML:

<template>
  <p>
    {responseOptionName}
  </p>
</template>

Survey Question Response Component JS:

import { LightningElement, api } from "lwc";

export default class SurveyQuestionResponse extends LightningElement {
  @api responseOptionName;
}

Survey Translation Child HTML:

<template>
  <lightning-card>
    <div>
      <p class="slds-p-horizontal_small">
        <span class="slds-text-title_bold">
          Question Name:
        </span>
        <span class="slds-m-left_x-small">
          {questionName}
        </span>
      </p>
      <p class="slds-p-horizontal_small">
        <span class="slds-text-title_bold">
          Response Type:
        </span>
        <span class="slds-p-horizontal_small">
          {questionType}
        </span>
      </p>
      <lightning-button
        variant="base"
        label="Click to view Response Choices"
        title="Save"
        onclick={handleClick}
        class="slds-m-left_x-small"
      ></lightning-button>
    </div>
  </lightning-card>
</template>

Survey Translation Child JS:

import { LightningElement, api, track } from "lwc";

export default class SurveyTranslationChild extends LightningElement {
  @api questionName;
  @api questionType;
  @api responseOptionsId;
  @api responseOptions;
  @api responseOptionName;
  @track surveyChoiceButton = false;

  handleClick() {
    this.surveyChoiceButton = !this.surveyChoiceButton;
    console.log(this.surveyChoiceButton);
  }
}

Update I have been able to get past the undefined error however the surveyQuestionResponse component is not rendering when set to true

enter image description here

SurveyQuestion object structure:

  • We need more information than "I'm having trouble". I don't see any obvious problem with your code or object structure. Please edit your question to include any errors, errant behavior, etc that may help us figure out your problem. – sfdcfox Jun 2 at 17:27
  • @sfdcfox I have updated the question. Sorry for the confusion. – Davis Handler Jun 2 at 17:49
  • @DavisHandler can you show the markup of survey-translation-child – salesforce-sas Jun 2 at 17:54
  • Hi @salesforce-sas I have updated accordingly. I have gotten the undefined error to go away however the survey question response component is not rendering when set to true – Davis Handler Jun 2 at 18:25
0

It is not working because you defined surveyChoiceButton in survey-translation-child and you are using it in surveyQuestions.

Remove the below code from surveyQuestions and put it in survey-translation-child

     <template if:true={surveyChoiceButton}>
            <template
              for:each={surveyQuestion.QuestionChoices}
              for:item="responseOption"
            >
              <c-survey-question-response
                response-option-name={responseOption.Name}
                key={responseOption.id}
              >
              </c-survey-question-response>
            </template>
          </template>
| improve this answer | |
  • this approach is not working as I am still getting QuestionChoices as undefined @salesforce-sas – Davis Handler Jun 2 at 18:59

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.