Render only the contents of an attribute in a markdown or other card

Configuration
1

I’ve got stuck and not been able to follow along with some of the other topics which seem very similar to what i’m trying to do.

tl,dr: I want to render the contents of three specific attributes (short_title, title, phase) from a sensor (sensor.joondalup_warnings) inside a markdown card, so they’re human readable, and not impacted by any themes’ impact to font and size selections (see the image below for what I mean on this bit).

Summary

I have an HACS integration installed (Bureau of Meteorology) which allows me, amongst other things, to get information on weather warnings in my specific area.

However, the specific text of the warning(s) is buried inside attributes of the sensor (sensor.joondalup_warnings).

Ideally, I’m wanting to bring the attribute contents of the sensor to the surface, and my thinking was using a Markdown Card would be the best way to do it.

Whilst I can render all of the sensor’s contents using:
{{ states.sensor.joondalup_warnings }}

I can’t figure out the right way to then get this down to display only the values of the three attributes I seek (short_title, title, phase).

To help understand what this sensor is outputting, here’s the full contents of {{ states.sensor.joondalup_warnings }} when rendered inside a Markdown card:

<template TemplateState(<state sensor.joondalup_warnings=2; response_timestamp=2023-11-25T04:08:50Z, copyright=This Application Programming Interface (API) is owned by the Bureau of Meteorology (Bureau). You must not use, copy or share it. Please contact us for more information on ways in which you can access our data. Follow this link http://www.bom.gov.au/inside/contacts.shtml to view our contact details., attribution=Data provided by the Australian Bureau of Meteorology, warnings=[{'id': 'WA_PW009_IDW21013', 'area_id': 'WA_PW009', 'type': 'heatwave_warning', 'title': 'Heatwave Warning for Lower West forecast district', 'short_title': 'Heatwave Warning', 'state': 'WA', 'warning_group_type': 'major', 'issue_time': '2023-11-25T04:04:39Z', 'expiry_time': '2023-11-26T10:04:39Z', 'phase': 'cancelled'}, {'id': 'WA_MW015_IDW20100', 'area_id': 'WA_MW015', 'type': 'marine_wind_warning', 'title': 'Marine Wind Warning for Western Australia', 'short_title': 'Marine Wind Warning', 'state': 'WA', 'warning_group_type': 'minor', 'issue_time': '2023-11-25T02:00:00Z', 'expiry_time': '2023-11-25T09:00:00Z', 'phase': 'new'}], icon=mdi:home-alert, friendly_name=Joondalup Warnings @ 2023-11-25T10:03:21.642526+08:00>)>

Screenshot 2023-11-25 121624
Screenshot 2023-11-25 121624531×923 91.2 KB

2

Firstly, it’s best not to use states.sensor.whatever because it can cause errors in you log when things are undefined, for example during startup. Use states("sensor.whatever") instead.

Similarly, to get attributes use `state_attr(“sensor.whatever”, “attribute_name”). In your case, the attribute name is “warnings”, and this is an array of objects. So the following will list all the warning objects:

{{ state_attr("sensor.joondalup_warnings", "warnings") }}

If you just want the first “short_title” you could use the following:

{{ state_attr("sensor.joondalup_warnings", "warnings") 
  | map(attribute='short_title') | first | default('') }}

But given you want more than one attribute, you’d be better off storing the first in a variable:

{% set first = state_attr("sensor.joondalup_warnings", "warnings") | first | default({}) %}

{{ first.short_title | default('') }}
{{ first.phase | default('') }}