Any tips on how to render a JSON array into some clickable dashboard cards?

distante · January 9, 2026, 3:29pm

I am trying to build a dashboard that shows a list of Podcast episodes, My goal is that when my kid click one of those, the episode will be queued on Music Assistant together with a playlist and a couple of automations will start.

So far I have created a rest sensor and I get the Podcast info as an array of episodes:

State Attribute of my rest sensor

item:
  - title: Bären
    link: >-
      https://kinder.wdr.de/radio/diemaus/audio/gute-nacht-mit-der-maus/audio-baeren-108.html
    description: >-
      Heute mit einem einsamen Braunbären, einem  Eisbär als Eisverkäufer und
      natürlich mit der Maus. Von WDR.
    content:encoded: >-
      Heute mit einem einsamen Braunbären, einem  Eisbär als Eisverkäufer und
      natürlich mit der Maus.
    enclosure:
      "@url": >-
        https://wdrmedien-a.akamaihd.net/medp/podcast/weltweit/fsk0/341/3418103/3418103_65516289.mp3
      "@length": "21727104"
      "@type": audio/mpeg
    pubDate: Fri, 02 Jan 2026 16:00:45 GMT
    guid:
      "@isPermaLink": "false"
      "#text": /gute_nacht_mit_der_maus__20260109_8a5e90d4.mp3
    itunes:duration: "00:21:44"
    itunes:episodeType: full
    itunes:author: WDR
    itunes:explicit: "no"
    itunes:image:
      "@href": >-
        https://www1.wdr.de/mediathek/audio/sendereihen-bilder/gute-nach-maus-100~_v-Podcast.jpg
    itunes:keywords: >-
      Sendung mit der Maus, Einschlafpodcast, Maus zum Hören, Träumen, Familie,
      Kinder
    itunes:summary: >-
      Heute mit einem einsamen Braunbären, einem  Eisbär als Eisverkäufer und
      natürlich mit der Maus.
    ard:visibility:
      ard:visibleFrom: "2026-01-09T12:27:08"
      ard:visibleUntil: "2026-02-01T17:00:45"
    ard:sendereihe: Gute Nacht mit der Maus
  - title: Tanzen
    link: >-
      https://kinder.wdr.de/radio/diemaus/audio/gute-nacht-mit-der-maus/audio-tanzen-116.html
    description: "Heute mit einem Tanzfest in Irland, einem Tanzbesen bei der Arbeit und natürlich mit der Maus.\r\n\r\n Von WDR."
    content:encoded: >-
      Heute mit einem Tanzfest in Irland, einem Tanzbesen bei der Arbeit und
      natürlich mit der Maus.
    enclosure:
      "@url": >-
        https://wdrmedien-a.akamaihd.net/medp/podcast/weltweit/fsk0/341/3417581/3417581_65504876.mp3
      "@length": "21686784"
      "@type": audio/mpeg
    pubDate: Thu, 08 Jan 2026 16:00:43 GMT
    guid:
      "@isPermaLink": "false"
      "#text": /gute_nacht_mit_der_maus__20260108_a645e22e.mp3
    itunes:duration: "00:21:42"
    itunes:episodeType: full
    itunes:author: WDR
    itunes:explicit: "no"
    itunes:image:
      "@href": >-
        https://www1.wdr.de/mediathek/audio/sendereihen-bilder/gutenachtmaus-tanzen-100~_v-Podcast.jpg
    itunes:keywords: >-
      Sendung mit der Maus, Einschlafpodcast, Maus zum Hören, Träumen, Familie,
      Kinder
    itunes:summary: >-
      Heute mit einem Tanzfest in Irland, einem Tanzbesen bei der Arbeit und
      natürlich mit der Maus.
    ard:visibility:
      ard:visibleFrom: "2026-01-08T17:00:43"
      ard:visibleUntil: "2026-02-07T17:00:43"
    ard:sendereihe: Gute Nacht mit der Maus
  - title: Küchendienst
    link: >-
      https://kinder.wdr.de/radio/diemaus/audio/gute-nacht-mit-der-maus/audio-kuechendienst-100.html
    description: >-
      Heute mit dem Hasen Nulli und dem Frosch Priesemut, einer Bärenoma mit
      Fußverletzung und natürlich mit der Maus. Von WDR.
    content:encoded: >-
      Heute mit dem Hasen Nulli und dem Frosch Priesemut, einer Bärenoma mit
      Fußverletzung und natürlich mit der Maus.
    enclosure:
      "@url": >-
        https://wdrmedien-a.akamaihd.net/medp/podcast/weltweit/fsk0/341/3416324/3416324_65475138.mp3
      "@length": "20914944"
      "@type": audio/mpeg
    pubDate: Wed, 07 Jan 2026 16:00:49 GMT
    guid:
      "@isPermaLink": "false"
      "#text": /gute_nacht_mit_der_maus__20260107_fd7ce615.mp3
    itunes:duration: "00:20:53"
    itunes:episodeType: full
    itunes:author: WDR
    itunes:explicit: "no"
    itunes:image:
      "@href": >-
        https://www1.wdr.de/mediathek/audio/sendereihen-bilder/gute-nacht-maus-kuechendienst-100~_v-Podcast.jpg
    itunes:keywords: >-
      Sendung mit der Maus, Einschlafpodcast, Maus zum Hören, Träumen, Familie,
      Kinder
    itunes:summary: >-
      Heute mit dem Hasen Nulli und dem Frosch Priesemut, einer Bärenoma mit
      Fußverletzung und natürlich mit der Maus.
    ard:visibility:
      ard:visibleFrom: "2026-01-07T17:00:49"
      ard:visibleUntil: "2026-02-06T17:00:49"
    ard:sendereihe: Gute Nacht mit der Maus
  - title: Fußball gucken
    link: >-
      https://kinder.wdr.de/radio/diemaus/audio/gute-nacht-mit-der-maus/audio-fussball-gucken-102.html
    description: "Heute mit Käpt`n Blaubär und Hein Blöd beim Fußball gucken, schlechten Erfahrungen im Stadion und natürlich mit der Maus.\r\n Von WDR."
    content:encoded: >-
      Heute mit Käpt`n Blaubär und Hein Blöd beim Fußball gucken, schlechten
      Erfahrungen im Stadion und natürlich mit der Maus.
    enclosure:
      "@url": >-
        https://wdrmedien-a.akamaihd.net/medp/podcast/weltweit/fsk0/341/3415063/3415063_65474826.mp3
      "@length": "20740608"
      "@type": audio/mpeg
    pubDate: Tue, 06 Jan 2026 16:00:16 GMT
    guid:
      "@isPermaLink": "false"
      "#text": /gute_nacht_mit_der_maus__20260106_e07fdb1d.mp3
    itunes:duration: "00:20:43"
    itunes:episodeType: full
    itunes:author: WDR
    itunes:explicit: "no"
    itunes:image:
      "@href": >-
        https://www1.wdr.de/mediathek/audio/sendereihen-bilder/gnm-fussball-gucken-100~_v-Podcast.jpg
    itunes:keywords: >-
      Sendung mit der Maus, Einschlafpodcast, Maus zum Hören, Träumen, Familie,
      Kinder
    itunes:summary: >-
      Heute mit Käpt`n Blaubär und Hein Blöd beim Fußball gucken, schlechten
      Erfahrungen im Stadion und natürlich mit der Maus.
    ard:visibility:
      ard:visibleFrom: "2026-01-06T17:00:16"
      ard:visibleUntil: "2026-02-05T17:00:16"
    ard:sendereihe: Gute Nacht mit der Maus
  - title: Brillen
    link: >-
      https://kinder.wdr.de/radio/diemaus/audio/gute-nacht-mit-der-maus/audio-brillen-104.html
    description: "Heute mit Trude und ihrem Tier, einer Wunderbrille und natürlich mit der Maus.\r\n Von WDR."
    content:encoded: >-
      Heute mit Trude und ihrem Tier, einer Wunderbrille und natürlich mit der
      Maus.
    enclosure:
      "@url": >-
        https://wdrmedien-a.akamaihd.net/medp/podcast/weltweit/fsk0/341/3415051/3415051_65435873.mp3
      "@length": "23523072"
      "@type": audio/mpeg
    pubDate: Mon, 05 Jan 2026 16:00:36 GMT
    guid:
      "@isPermaLink": "false"
      "#text": /gute_nacht_mit_der_maus__20260105_b46ce023.mp3
    itunes:duration: "00:23:36"
    itunes:episodeType: full
    itunes:author: WDR
    itunes:explicit: "no"
    itunes:image:
      "@href": >-
        https://www1.wdr.de/mediathek/audio/sendereihen-bilder/gnm-brillen-100~_v-Podcast.jpg
    itunes:keywords: >-
      Sendung mit der Maus, Einschlafpodcast, Maus zum Hören, Träumen, Familie,
      Kinder
    itunes:summary: >-
      Heute mit Trude und ihrem Tier, einer Wunderbrille und natürlich mit der
      Maus.
    ard:visibility:
      ard:visibleFrom: "2026-01-05T17:00:36"
      ard:visibleUntil: "2026-02-04T17:00:36"
    ard:sendereihe: Gute Nacht mit der Maus
  - title: In der Bibliothek
    link: >-
      https://kinder.wdr.de/radio/diemaus/audio/gute-nacht-mit-der-maus/audio-in-der-bibliothek-104.html
    description: "Heute mit einer rettenden Bibliothek, einem Fuchs und einem Huhn und natürlich mit der Maus.\r\n Von WDR."
    content:encoded: >-
      Heute mit einer rettenden Bibliothek, einem Fuchs und einem Huhn und
      natürlich mit der Maus.
    enclosure:
      "@url": >-
        https://wdrmedien-a.akamaihd.net/medp/podcast/weltweit/fsk0/341/3415048/3415048_65435851.mp3
      "@length": "19406208"
      "@type": audio/mpeg
    pubDate: Sun, 04 Jan 2026 16:00:34 GMT
    guid:
      "@isPermaLink": "false"
      "#text": /gute_nacht_mit_der_maus__20260104_7a61513d.mp3
    itunes:duration: "00:19:19"
    itunes:episodeType: full
    itunes:author: WDR
    itunes:explicit: "no"
    itunes:image:
      "@href": >-
        https://www1.wdr.de/mediathek/audio/sendereihen-bilder/bibliothek-gutenachtmaus-100~_v-Podcast.jpg
    itunes:keywords: >-
      Sendung mit der Maus, Einschlafpodcast, Maus zum Hören, Träumen, Familie,
      Kinder
    itunes:summary: >-
      Heute mit einer rettenden Bibliothek, einem Fuchs und einem Huhn und
      natürlich mit der Maus.
    ard:visibility:
      ard:visibleFrom: "2026-01-04T17:00:34"
      ard:visibleUntil: "2026-02-03T17:00:34"
    ard:sendereihe: Gute Nacht mit der Maus
  - title: Vulkane
    link: >-
      https://kinder.wdr.de/radio/diemaus/audio/gute-nacht-mit-der-maus/audio-vulkane-116.html
    description: "Heute mit Käpt`n Blaubär und einem etwas anderen Vulkanausbruch, einer sagenumwobenen Rohkostinsel und natürlich mit der Maus.\r\n Von WDR."
    content:encoded: >-
      Heute mit Käpt`n Blaubär und einem etwas anderen Vulkanausbruch, einer
      sagenumwobenen Rohkostinsel und natürlich mit der Maus.
    enclosure:
      "@url": >-
        https://wdrmedien-a.akamaihd.net/medp/podcast/weltweit/fsk0/341/3415042/3415042_65435599.mp3
      "@length": "22475136"
      "@type": audio/mpeg
    pubDate: Sat, 03 Jan 2026 16:00:02 GMT
    guid:
      "@isPermaLink": "false"
      "#text": /gute_nacht_mit_der_maus__20260103_a2a652cf.mp3
    itunes:duration: "00:22:31"
    itunes:episodeType: full
    itunes:author: WDR
    itunes:explicit: "no"
    itunes:image:
      "@href": >-
        https://www1.wdr.de/mediathek/audio/sendereihen-bilder/gutenachtmaus-vulkane-100~_v-Podcast.jpg
    itunes:keywords: >-
      Sendung mit der Maus, Einschlafpodcast, Maus zum Hören, Träumen, Familie,
      Kinder
    itunes:summary: >-
      Heute mit Käpt`n Blaubär und einem etwas anderen Vulkanausbruch, einer
      sagenumwobenen Rohkostinsel und natürlich mit der Maus.
    ard:visibility:
      ard:visibleFrom: "2026-01-03T17:00:02"
      ard:visibleUntil: "2026-02-02T17:00:02"
    ard:sendereihe: Gute Nacht mit der Maus
  - title: Planeten
    link: >-
      https://kinder.wdr.de/radio/diemaus/audio/gute-nacht-mit-der-maus/audio-planeten-102.html
    description: >-
      Heute mit einer Reise zum schiefen Turm von Pisa, der Sonne und unseren
      Planeten und natürlich mit der Maus. Von WDR.
    content:encoded: >-
      Heute mit einer Reise zum schiefen Turm von Pisa, der Sonne und unseren
      Planeten und natürlich mit der Maus.
    enclosure:
      "@url": >-
        https://wdrmedien-a.akamaihd.net/medp/podcast/weltweit/fsk0/341/3414152/3414152_65407931.mp3
      "@length": "25224576"
      "@type": audio/mpeg
    pubDate: Fri, 02 Jan 2026 16:00:15 GMT
    guid:
      "@isPermaLink": "false"
      "#text": /gute_nacht_mit_der_maus__20260102_dd9414e2.mp3
    itunes:duration: "00:25:23"
    itunes:episodeType: full
    itunes:author: WDR
    itunes:explicit: "no"
    itunes:image:
      "@href": >-
        https://www1.wdr.de/mediathek/audio/sendereihen-bilder/gutenachtmaus-neujahr-104~_v-Podcast.jpg
    itunes:keywords: >-
      Sendung mit der Maus, Einschlafpodcast, Maus zum Hören, Träumen, Familie,
      Kinder
    itunes:summary: >-
      Heute mit einer Reise zum schiefen Turm von Pisa, der Sonne und unseren
      Planeten und natürlich mit der Maus.
    ard:visibility:
      ard:visibleFrom: "2026-01-02T17:00:15"
      ard:visibleUntil: "2026-02-01T17:00:15"
    ard:sendereihe: Gute Nacht mit der Maus
  - title: Berufswunsch
    link: >-
      https://kinder.wdr.de/radio/diemaus/audio/gute-nacht-mit-der-maus/audio-berufswunsch-102.html
    description: "Heute mit einem Vater, seinem Sohn und einer Familientradition und natürlich mit der Maus.\r\n Von WDR."
    content:encoded: >-
      Heute mit einem Vater, seinem Sohn und einer Familientradition und
      natürlich mit der Maus.
    enclosure:
      "@url": >-
        https://wdrmedien-a.akamaihd.net/medp/podcast/weltweit/fsk0/341/3413582/3413582_65394840.mp3
      "@length": "23983104"
      "@type": audio/mpeg
    pubDate: Thu, 01 Jan 2026 16:00:39 GMT
    guid:
      "@isPermaLink": "false"
      "#text": /gute_nacht_mit_der_maus__20260101_8182de8b.mp3
    itunes:duration: "00:24:05"
    itunes:episodeType: full
    itunes:author: WDR
    itunes:explicit: "no"
    itunes:image:
      "@href": >-
        https://www1.wdr.de/mediathek/audio/sendereihen-bilder/gutenachtmaus-neujahr-102~_v-Podcast.jpg
    itunes:keywords: >-
      Sendung mit der Maus, Einschlafpodcast, Maus zum Hören, Träumen, Familie,
      Kinder
    itunes:summary: >-
      Heute mit einem Vater, seinem Sohn und einer Familientradition und
      natürlich mit der Maus.
    ard:visibility:
      ard:visibleFrom: "2026-01-01T17:00:39"
      ard:visibleUntil: "2026-01-31T17:00:39"
    ard:sendereihe: Gute Nacht mit der Maus
  - title: Guten Rutsch
    link: >-
      https://kinder.wdr.de/radio/diemaus/audio/gute-nacht-mit-der-maus/audio-guten-rutsch-100.html
    description: >-
      Heute mit vielen Silvestergeschichten, Trude und ihrem Tier und natürlich
      mit der Maus. Von WDR.
    content:encoded: >-
      Heute mit vielen Silvestergeschichten, Trude und ihrem Tier und natürlich
      mit der Maus.
    enclosure:
      "@url": >-
        https://wdrmedien-a.akamaihd.net/medp/podcast/weltweit/fsk0/341/3413579/3413579_65394801.mp3
      "@length": "24045312"
      "@type": audio/mpeg
    pubDate: Wed, 31 Dec 2025 16:00:11 GMT
    guid:
      "@isPermaLink": "false"
      "#text": /gute_nacht_mit_der_maus__20251231_63397853.mp3
    itunes:duration: "00:24:09"
    itunes:episodeType: full
    itunes:author: WDR
    itunes:explicit: "no"
    itunes:image:
      "@href": >-
        https://www1.wdr.de/mediathek/audio/sendereihen-bilder/gutenachtmaus-neujahr-100~_v-Podcast.jpg
    itunes:keywords: >-
      Einschlafpodcast, Entspannen, Träumen, Sendung mit der Maus, Kinder,
      Eltern, Familie
    itunes:summary: >-
      Heute mit vielen Silvestergeschichten, Trude und ihrem Tier und natürlich
      mit der Maus.
    ard:visibility:
      ard:visibleFrom: "2025-12-31T17:00:11"
      ard:visibleUntil: "2026-01-30T17:00:11"
    ard:sendereihe: Gute Nacht mit der Maus
friendly_name: Gute Nacht mit der Maus Episodios

Now I am kind of lost on how to map that data to some clickeable card. I searched for ways but did not found anything. ChatGPT also was not helpful.

Does anyone has a recommedation for this?

Thank you!

petro · January 9, 2026, 4:44pm

The custom card auto-entities is really your only option.

Or markdown card.

Neither will be an easy setup for this. It’s all because you want a dynamic list of things. If it was static, it could be done with normal dashboarding

vingerha · January 9, 2026, 4:50pm

Flex-table card has an option to do perform-action and use data from the cell one clicks on. There are limitations and it all depends on what data you need to trigger which action. Some examples here

flex-table-card/docs/example-cfg-calling-actions.md at master · custom-cards/flex-table-card

EDIT: I am not using the music_assistant integration and not known how to trigger the playing of pieces but this is a direction you may have a look at, it could be that you need something else to trigger, a script or so but that is for you to detail yourselves, this is just an idea on how to get data out of your entity into an action (the input_text.test is a demo, I copied data from above

type: custom:flex-table-card
entities:
  include: input_text.test
clickable: true
title: Clickable cell
max_rows: 20
columns:
  - name: Title
    attr_as_list: item
    modify: x.title
  - name: Title
    attr_as_list: item
    modify: x.link
    tap_action:
      action: perform-action
      confirmation:
        text: Play cell[0]
      perform_action: music_assistant.play_media
      data:
        album: cell[0]
        something: cell[1]

distante · January 9, 2026, 7:45pm

This looks promising! Thanks. I will check if when I come home!

IOT7712 · January 10, 2026, 4:13am

Did the release notes the other day give you hope and excitement, especially in the labs discussion?

distante · January 10, 2026, 2:08pm

What do you mean?

distante · January 10, 2026, 4:08pm

Thanks a lot @vingerha! I got the final layout like I wanted.

I added the image, and style it with card_mod, it is now also mobile friendly

Here the code

type: custom:flex-table-card
entities:
  include: sensor.gute_nacht_mit_der_maus_episodios
clickable: false
title: Gute Nacht Mit Der Maus
max_rows: 20
columns:
  - name: ""
    data: item
    modify: >-
      '<img width="150" height="150" src="' + x['itunes:image']['@href'] + '"
      />'
    tap_action: none
  - name: ""
    data: item
    modify: x.title
    tap_action: none
  - name: ""
    data: item
    modify: x.description
    tap_action:
      action: perform-action
      confirmation:
        text: Play cell[0]
      perform_action: music_assistant.play_media
      data:
        album: cell[0]
        something: cell[1]
card_mod:
  style: |
    #flextbl {
       border-collapse: separate;
       border-spacing: 0;
       display: flex;
       gap: 1em;
       flex-wrap: wrap;
     }
     
     #flextbl thead {
       display: none;
     }
     
     #flextbl tr {
       display: flex;
       flex-direction: column;
       background: var(--card-background-color, #1c1c1c);
       border-radius: 8px;
       box-shadow: 0 2px 8px rgba(0,0,0,0.2);
       overflow: hidden;
       max-width: 300px;
       margin: 0 auto 1em auto;
       cursor: pointer;
     }
     
     #flextbl tr td {
       border: none !important;
       padding: 0 !important;
       max-width: 300px;
     }
     
     #flextbl tr td:first-child img {
       width: 300px;
       height: 300px;
       object-fit: cover;
       display: block;
     }
     
     #flextbl tr td:nth-child(2) {
       padding: 12px 16px 8px 16px !important;
       font-weight: bold;
       font-size: 150%;
     }
     
     #flextbl tr td:nth-child(3) {
       padding: 0 16px 16px 16px !important;
     }

I still have to work on my script to create a dynamic playlist after click but without your answer I would have been blocked several days

Cheers!

vingerha · January 10, 2026, 4:11pm

Looks nice indeed… and do post when you found out how to add things to the queue, I know how to extract data via the MA API and this same API can also be used to populate the queue I seem to see. The MA integration itself seems complex at first sight where one needs to know quite some tech details to push through the action.

Note: I do use MA but not integrated with HA

distante · January 10, 2026, 8:28pm

At the end I ditched the API Route and did a couple of scripts because I needed to do something between the podcast episode and the “sleeping music” that should come aftewards

Each card just sends the URL of the podcast episode in the podcast_url field

- name: ""
    data: item
    modify: x.description
    tap_action:
      action: perform-action
      confirmation:
        text: Listen "cell[1]"?
      perform_action: script.poner_gute_nacht_mit_der_maus_y_luego_musica_de_dormir
      data:
        podcast_url: cell[3]
  - name: LINK
    data: item
    modify: x.enclosure['@url']

Then the script:

Sets the correct volume
Plays the episode replacing the current queue
Waits until it is playing
Sets repeat mode to none
Waits for the player to be idle for 3 seconds
Calls a second (already existent script) that plays the “sleeping” playlist at the correct level and repeat mode.
Notifies me that it was done.

Here the waiting script

sequence:
  - action: media_player.volume_set
    metadata: {}
    target:
      entity_id: media_player.music_assistant_radio
    data:
      volume_level: 0.14
  - action: music_assistant.play_media
    metadata: {}
    data:
      media_id: "{{ podcast_url }}"
      enqueue: replace
    target:
      entity_id: media_player.music_assistant_radio_dana
  - alias: Wait until it is playing
    wait_template: |-
      {{ 
        is_state('media_player.music_assistant_radio', 'playing')
        and state_attr('media_player.music_assistant_radio', 'media_artist') == 'WDR'
        and 'Gute Nacht mit der Maus' in (state_attr('media_player.music_assistant_radio', 'media_title') | default(''))
      }}
    continue_on_timeout: false
    enabled: true
  - action: media_player.repeat_set
    metadata: {}
    target:
      entity_id: media_player.music_assistant_radio
    data:
      repeat: "off"
  - alias: Wait for podcast to end
    wait_for_trigger:
      - device_id: 04f606bb0574eccef263e018ec8da7ad
        domain: media_player
        entity_id: f36eed32f7e915e80065f267e52c7eed
        type: idle
        trigger: device
        for:
          hours: 0
          minutes: 0
          seconds: 3
    continue_on_timeout: false
  - action: script.turn_on
    metadata: {}
    target:
      entity_id: script.play_sleeping_music
    data: {}
  - action: notify.dad_phone_notify_group
    metadata: {}
    data:
      message: >-
       Sleeping music was triggered at {{ now().strftime('%H:%M -
        %d.%m.%Y ') }}
alias: Play Gute Nacht mit der Maus y then sleeping music
description: ""
icon: mdi:podcast
fields:
  podcast_url:
    selector:
      text: null
    name: Podcast URL
    description: podcast mp3 url
    required: true
mode: restart

I have just done shallow tests and seems to be working.

Right now my kid is listening to their podcast so let’s see what happens! But I think it will work