---
title: "How to render Map in LWC"
url: "https://blog.beyondthecloud.dev/tips/how-to-render-map-in-lwc"
category: "LWC"
tags: "apex"
published: "2024-01-02"
---

# How to render Map in LWC

LWC for:each can't use Map to show elements, but it's easy to make it happen!

### Render Map in LWC

How to render Map<String, SObject> in LWC?

LWC for:each can't use Map to show elements, but it's easy to make it happen!

Get the data from the backend:

```apex
@AuraEnabled(cacheable=true)
public static Map<String, Account> getAccounts() {
    Map<String, Account> accounts = new Map<String, Account>();

    for (Account account : [
        SELECT Id, Name, NumberOfEmployees, (SELECT Id, Name, Email, Phone FROM Contacts)
        FROM Account
    ]) {
        accounts.put(account.Name, account);
    }

    return accounts;
}
```

Then we simply transform the map into an array:

```javascript
@wire(getAccounts, {})
wiredAccounts({ data, error }) {
    if(data) {
        this.data = Object.entries(data).map(([key, value]) => ({
            name: key,
            employees: value.NumberOfEmployees,
            contacts: value.Contacts
        }));
    } else if(error){
        console.error(error)
    }
}
```

Why can it be useful?

Simplified HTML looks like this:

```markup
<template>
    <template for:each={data} for:item="account">
        <template for:each={account.contacts} for:item="contact">
            <h3 key={account.Name}>{contact.Name}</h3>
        </template>
    </template>
</template>
```

The final solution can look like this:

![How to render Map in LWC — screenshot 3](https://blog.beyondthecloud.dev/tips/how-to-render-map-in-lwc/fig-3.webp)

This can be useful for any kind of nested data, such as List of Lists, Maps, or Wrappers. The principle is to parse data into an Array, which then can be rendered by LWC for:each.