# Rendering Mapped / Grouped Data

**URL:** <https://talk.observablehq.com/t/rendering-mapped-grouped-data/3476>\
**Category:** Help\
**Created:** [June 18, 2020, 2:29pm UTC](https://talk.observablehq.com/t/rendering-mapped-grouped-data/3476 "2020-06-18T14:29:05Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [June 18, 2020, 3:37pm UTC](https://talk.observablehq.com/t/rendering-mapped-grouped-data/3476/4 "2020-06-18T15:37:22Z")

</div>

> [@aaronkyle](#):
>
> Any tips for how to render in values directly from my grouped data (or the derived array)?

You almost had it:

```javascript
grouped_data_array = Array.from(grouped_data, ([key, map]) => ({
  name: key.toLowerCase(),
  value: map.size,
}))

```

I highly recommend following some tutorials on the various Array, Set and Map methods as well as Destructuring in JS, as this knowledge will likely come in handy on a daily basis.

---

_[View the full topic](https://talk.observablehq.com/t/rendering-mapped-grouped-data/3476)._