Include vs import for json file

Configuration Frontend
1

Hi,

I have a json file. It’s called footer-buttons-obj.json
Very simplified it looks like this:

{
  "porch": [
    {
      "icon": "mdi:home",
      "background": "aliceblue",
      "tap_action": {
        "action": "navigate",
        "navigation_path": "/porch-control/ac"
      }
    },
   {
      "icon": "mdi:lightbulb-outline",
      "entity": "light.porch_lights",
      "margin": "8px",
      "hold_action": {
        "action": "navigate",
        "navigation_path": "/porch-control/ac"
      }
    }, ... and lots more
"family": [
    {
      "icon": "mdi:home",
      "background": "aliceblue",
      "tap_action": {
        "action": "navigate",
        "navigation_path": "/porch-control/ac"
      }
    },
    {},
    {
      "icon": "si:lg",
      "size": "48px",
      "color": "rgb(165,0,52)",
      "tap_action": {
        "action": "fire-dom-event",
        "include": "../views/porch-tv.yaml",
        "options": [
          "dismissable: true",
          "title: Family Fire TV",
          "autoclose: false"
        ]
      }
    }, .. and lots more...

I want to import this into a variable in my dashboard - but only import the key I need (i.e. Porch or Family).

I tried using the regular import, and I succeeded in importing the whole json file into a variable. But ran into trouble trying to use it as it becomes a weird variable ModuleTemplate that can’t be iterated.

So then I tried the alternate import syntax, but using this failed (it can’t parse ‘porch’ as a key)
{% from '/config/yaml/imports/footer-buttons-obj.json' import porch as footer_data with context %}

If I change the json file into a yaml file with and assign the json to a variable called porch in that file like so:
{% set porch = {...all the json data...} %}

Then this works:
{% from '/config/yaml/imports/footer-buttons-obj.yaml' import porch as footer_data with context %}

But I lose all the benefit of a nice clean json file.

So, I came up with the following, which works, with one downside:

     {% macro import_json(source) %}
       {% include source %}
     {% endmacro %}

     {% set room = "porch" %}
     {% set import_file = '/config/yaml/imports/footer-buttons-obj.json' %}
     {% set json_data2 = (import_json(import_file) | fromjson)[room] %}

The downside is that it’s loading the whole darn json file, sending a string back to the import_file variable, which I then convert to a json object and pluck the key I want.

Can anyone think of a cleaner approach that (a) let’s me use variables for both the filename and key and (b) doesn’t load the whole darn json file?

2

I use lovelace_gen

This allows inclusion of an arbitrary number of yaml data definitions.

It inverts the problem, you use the data to generate the Lovelace dashboards.

3

I’m using that extensively.
In this use case, in addition to all the lovelace_gen, I want a json file to drive the creation of a bunch of widgets. The above code, generates this for my fire_tv

image

and this, for my samsung tv:

image

Just by feeding a different json file.

Where lovelace_gen comes in, is that allows me to move all my widget creation code into !include files and then I can feed those widgets with objects (from the json) to create widgets with minimal code.

Missing from my code above is what I do with json –
In this snippet, I get my shortcut json for my firetv from a file, and send it to a component.

      {% set shortcut_device = "firetv" %}
      {% set shortcut_file = '/config/yaml/imports/shortcuts.json' %}
      {% set shortcut_data = (import_json(shortcut_file) | fromjson)[shortcut_device] %}

      {% set shortcut_entity = "media_player.fire_tv_192_168_1_91" %}
      {% set shortcut_button_selected_bg = "yellow" %}

      - !include
          - ../components/button-grid.yaml
          - service: {{shortcut_data.service}}
            entity: {{shortcut_entity}}
            button_data: {{shortcut_data.buttons}}

            {# optional attributes #}
            source_attribute: {{shortcut_data.source_attribute}} 
            service_type: {{shortcut_data.service_type}}
            button_selected_bg: {{shortcut_button_selected_bg}}
            layout_margin: "12px 0 0px 0"

The result is this:
image

4

Very nice, You are several steps beyond where I am.

5

:slight_smile:

The other driver is I absolutely HATE yaml editing in HA.
It’s so damn hard, even with VSCode to debug, and stupid indentation errors can cause me hours of work!

p.s. anyone know how to send the value of a variable to the logger in a dashboard yaml?

1 Like