Trying to parse JSON string from MQTT into a card for display

I’m trying to find a way to display data from my BirdNET-Pi into a Home Assistant dashboard. MQTT is receiving data from the topic and I created a sensor that receives the string, but I’m clearly lost when it comes to parsing it into something readable.

Current output looks as follows:

Sensor configuration:

mqtt:
  sensor:
    # birdpi
    - name: "BirdNETPi Bird Heard"
      unique_id: "BirdNetPi-01-heard"
      state_topic: "birdnet/sightings"
      json_attributes_topic: "birdnet/sightings"
      value_template: '{{ value_json.ts, value_json.cmn, value_json.img }}'

I’d like to be able to display the last 10 messages, along with the card showing a thumbnail of the image that is contained in value_json.img, but I’m lost at this point.

Example MQTT message payload:

{
    "ts": "2025-05-18T16:23:13",
    "sci": "Poecile atricapillus",
    "cmn": "Black-capped Chickadee",
    "cnf": 0.7611,
    "img": "https://live.staticflickr.com/7430/27545810581_8bfa8289a3_c.jpg",
    "link": "http://10.0.1.35/?filename=Black-capped_Chickadee-76-2025-05-18-birdnet-16:23:13.mp3"
}

Perhaps your looking for the logbook card.

The logbook card is at least showing history, but I think I still need to parse the data somehow and also have the image show up instead of the URL:

I think you are putting too much into the value_template. A sensor can only have one state. Try

value_template: '{{value_json.ts}}'

The rest should be attributes, or separate sensors.

1 Like

Thanks! But how would I place the other values into different attributes?