HomeAssistant Card List

HomeAssistant card list from JSON response

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

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:

Now click on 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
    cards:
      - type: entities
        title: Items List
        entities:
          - entity: sensor.takealot_sales_list

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.

rest:
  - resource: !secret takealot_url
    scan_interval: 1800
    headers:
      authorization: !secret takealot_api_key
      content-type: 'application/json'
    method: GET
    params:
      page_number: 1
      filters: "start_date:{{now().strftime('%Y-%m-%d')}}"
    sensor:
      - 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:

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

Update our card list to our new sensor

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

And now we will see our items appearing in the list