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, sincesectionsAndFields[null]
is null.sectionAndFields.data
is not defined, either. Overall, there's a ton of mistakes here. What's your actual objective?displaymarker
is fed in through the parent component. My goal is to dynamically pull an array from data.js, usingdisplaymarker
as the key (Ifdisplaymarker
changes, the array changes, etc.) I am very new to lwc and javascript so please forgive my errors.