Iterate a Javascript map in Lightning Web Component template

Question

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

Answer 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;