I had a need to display a list of items in Home Assistant. I have a REST sensor that calls an endpoint that returns a JSON list. I wanted to display that list in a card in Home Assistant.

Take Note: The maximum length of a entity’s state is 255 characters!

The steps to follow are:

  1. Create a custom card in the lovelace yaml
  2. Create the REST sensor
  3. Tell the card to display the items from that sensor

Create the custom card

Go to your Dashboard and click on Edit Dashboard. Your screen should now look like this:

Edit dashboard

Now click on Raw Configuration Editor

raw configuration editor

Now scroll down to the bottom and add config like this:

  • Title will be the Title of the new Dashboard
  • Entity, in line 110, will be the name of the entity we will add in step 2 (the name of the entity right now does not matter, we will change it once we’ve added the entity)
  - title: Takealot Sales List
      - type: entities
        title: Items List
          - entity: sensor.takealot_sales_list
card yaml

When done, click the Save button in the top right corner.

You should now see a new Dashboard with only this one card we added. It will show an error that the entity cannot be found, but that is fine.

Our aim here is to add the card.

Create the REST sensor

Go to your configuration.yaml and add your REST sensor. Here is my REST sensor code. I added the sensor “takealot_sales_list” (the very last sensor). This sensor will format the JSON (example output below) into a basic list.

  - resource: !secret takealot_url
    scan_interval: 1800
      authorization: !secret takealot_api_key
      content-type: 'application/json'
    method: GET
      page_number: 1
      filters: "start_date:{{now().strftime('%Y-%m-%d')}}"
      - name: takealot_sales
        value_template: "{{ value_json['sales'] | length }}"
      - name: takealot_sales_price
        value_template: "{{ value_json['sales'] | map(attribute='selling_price') | map('float') | sum }}"
      - name: takealot_sales_list
        value_template: >
          {% set sales = value_json['sales'] %}
          {% for sale in sales %}
            - {{ sale['product_title'] }}: {{ sale['quantity'] }}
          {% endfor %}

Here is an example of the JSON response I am working with:

example json

Now save your configuration.yaml and restart Home Assistant, or at the very least go to “Developer Tools” and reload all yaml config

reload all yaml config under developer tools

Update our card to our new sensor

Now lets go back to our card that we added and tell it to show our new entity

update card to our new entity

And now we will see our items appearing in the list

card now showing values