0

I am attempting to dynamically pull an array via a dictionary in lwc. I am new to lwc and javascript and am having trouble getting the objects to transfer data between components.

My code is as follows:

data js

export const sectionsAndFields = {
    'Approval': [{'value':1},{'value':2},{'value':3}],
    'list_2': [{'value':4},{'value':5},{'value':6}]
};

reader js

import { LightningElement, api } from "lwc";
import { sectionsAndFields } from "c/data";

export default class FinancialPlanFieldFinderLayout extends LightningElement {
  @api displaymarker;
  sectionsAndFields = sectionsAndFields;
  keyer = sectionsAndFields[this.displaymarker];

  @api
  get displayMarkerGetSet() {
    return this._displaymarker;
  }
  set displayMarkerGetSet(value) {
    this.setAttribute("displaymarker", value);
    this._displaymarker = value;
  }

reader html

<template>
  <lightning-card title={displaymarker}>
      <div>displaymarker: {displaymarker}</div>
      <div>keyer: {keyer}</div>
      <div>sectionsAndFields: {sectionsAndFields}</div>
      <div>sectionsAndFields data: {sectionsAndFields.data}</div>
  </lightning-card>
</template>

Of the values rendered in the reader html, I get the following:

  • {displaymarker} renders Approval (the default value from a parent component)
  • {keyer} renders nothing
  • {sectionsAndFields} renders [object Object]
  • {sectionsAndFields.data} renders nothing

What I expected to happen was as follows:

  • {keyer} renders [{'value':1},{'value':2},{'value':3}] (from data.js)
  • {sectionsAndFields} renders [object Object]
  • {sectionsAndFields.data} renders [{'value':1},{'value':2},{'value':3}] (from data.js)

Can someone help me understand why {keyer} and {sectionsAndFields.data} are returning null, and how to correct this so as to get the dictionary value from the input key?

  • displayMarkerGetSet appears to never be called. Also, you're copying to _displaymarker, which is never defined. keyer is rightfully null, since sectionsAndFields[null] is null. sectionAndFields.data is not defined, either. Overall, there's a ton of mistakes here. What's your actual objective? – sfdcfox Mar 7 '20 at 20:54
  • @sfdcfox displaymarker is fed in through the parent component. My goal is to dynamically pull an array from data.js, using displaymarker as the key (If displaymarker changes, the array changes, etc.) I am very new to lwc and javascript so please forgive my errors. – Jwok Mar 8 '20 at 3:07
1

Few things,

1) There is no data attribute in data.js sectionsAndFields . The two attribute it has is Approval and list_2. So when you try to access data in markup as

<div>sectionsAndFields data: {sectionsAndFields.data}</div> would return nothing.

fix: Use Approval or list_2 as key.

<div>sectionsAndFields data: {sectionsAndFields.Approval}</div>

2) keyer should be getter as its dependent on input, had it been hardcoded values, You can just use as it like

keyer = sectionsAndFields['Approval'] and it would work. But our case is to use dynamic values, hence getter seems better option.

get keyer(){
      return this.sectionsAndFields[this.displaymarker];
    }

Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/EyWz26Ub/7/edit

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.