0

I'm not very good with javascript, but I'm trying to iterate over list of values of a map/json objects to show them in an LWC. I'm not really sure if this could be achieved, but here's my sample code.

app.js

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    /**
     * Getter for the fields
     */
    get fields() {
        var fields = {
            'abcd1234': { Id: 'abcd1234', field1__c: 'bar',  field2__c: 'bar' , field3__c:'abc'},
            'abcd2334': { id: 'abcd2334', field1__c: 'world',  field2__c: 'bar' }
        };

        return fields;
    }
}

app.html

<template>
        <template for:each={fields} for:item="field" >
                {field.field1__c}
        </template>
</template>

I'm able to iterate over a list of array objects, but not the above map.

Expected Output

bar
world
1

No, it is not possible to iterate over a Map. You need to convert the Map to an Array first.

var fields = {
    'abcd1234': { Id: 'abcd1234', field1__c: 'bar',  field2__c: 'bar' , field3__c:'abc'},
    'abcd2334': { id: 'abcd2334', field1__c: 'world',  field2__c: 'bar' }
};
fields = Object.keys(fields).map(key=> ({ key: key, ...fields[key] }));
return fields;
| improve this answer | |
  • Thank you, that worked. – mereMortal Mar 12 at 19:51
  • @mereMortal You're welcome! – sfdcfox Mar 12 at 19:56

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.