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? – sfdcfox Mar 7 '20 at 20:54displaymarker
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. – Jwok Mar 8 '20 at 3:07