Is it possible to use dynamic widget item for display using json data?

[ubeaut (Greg)]

I am wondering if I can display data on OH3 overview page a weather forecast. I have done by using lots of items but I thought the data that is displayed is the same format so can I make it dynamic and cut down the number of items used?
Use something like: =(items.BOM_Day1_ForecastDateAndTime.displayState) but make it dynamic

What I want to do is get the weather data in json format and there is a site in Australia that can do that. I put all the data into one item called BomMV_Data using the http binding.
That works and I can see the data.
I can also parse the data in JavaScript so I know I can do that as well.

var obj = itemRegistry.getItem("BomMV_Data").getState();
var test = JSON.parse(obj) ;


for (var count = 0; count < 7; count++) {
logger.info('Icon: ' + test.data[count].icon_descriptor);
logger.info('Short text: ' + test.data[count].short_text);
logger.info('Date: ' + test.data[count].date);
logger.info('Max: ' + test.data[count].temp_max);
logger.info('Min: ' + test.data[count].temp_min);
logger.info('Forecast ' + test.data[count].extended_text);
}

2021-03-15 09:47:30.709 [INFO ] [org.openhab.rule.scratchpad ] - Icon: sunny
2021-03-15 09:47:30.710 [INFO ] [org.openhab.rule.scratchpad ] - Short text: Sunny.
2021-03-15 09:47:30.711 [INFO ] [org.openhab.rule.scratchpad ] - Date: 2021-03-14T13:00:00Z
2021-03-15 09:47:30.712 [INFO ] [org.openhab.rule.scratchpad ] - Max: 20
2021-03-15 09:47:30.713 [INFO ] [org.openhab.rule.scratchpad ] - Min: 7
2021-03-15 09:47:30.714 [INFO ] [org.openhab.rule.scratchpad ] - Forecast Sunny. Light winds.

What I don’t know and can’t find any information is whether I can use the same sort of logic to display on the overview page.

I have tried lots of different things using the developer side bar widget tester but can’t crack the code I need.
This didn’t work either:
=transform(“JSONPATH”,"$.data[0].extended_text",(items.BomMV_Data.state))

My question is can it be done?

Thanks

[denominator (James Bowler)]

Maybe a router component

Router Component | Framework7 Documentation

[ubeaut (Greg)]

So it doesn’t look easy as I was hoping. Looks like it is back to having lots of items.

[ysc (Yannick Schaus)]

It’s certainly possible with a oh-repeater, I have an item holding some JSON in its state like:

[{"conso": "5", "time": "02/03/2021"}, {"conso": "17", "time": "03/03/2021"}, ...]

I’m displaying it in a list like this:

    component: oh-list
      config:
        style:
          min-width: 250px
          --f7-list-item-after-font-size: 16px
          --f7-list-item-after-font-weight: bold
          --f7-list-item-after-text-color: var(--f7-text-color)
      slots:
        default:
          - component: oh-repeater
            config:
              for: day
              in: =JSON.parse(items.Gazpar_DailyRaw.state)
              fragment: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: =dayjs(loop.day.time.substring(6) + '-' + loop.day.time.substring(3,5) +
                      '-' + loop.day.time.substring(0,2) +
                      'T02:00:00.000Z').format('dddd D MMMM')
                    after: =loop.day.conso + ' kWh (' + Math.round(
                      loop.day.conso * (0.00843 + 0.03610) * 120) / 100 + ' €)'

[ubeaut (Greg)]

Thanks for that. What I was hoping for was a single liner where I could just pull out data for one item if needed.

Similar to this: =(items.BOM_Day1_ForecastDateAndTime.displayState) but obviously make it variable. Like this: =transform(“JSONPATH”,"$.data[0].extended_text",(items.BomMV_Data.state)) but I can’t seem to be able to simply do that without creating lots of items.

I guess it can’t be done simply.

[ubeaut (Greg)]

The statement works and displays the ALL of the data:
=JSON.parse(items.BomMV_Data.state)

If I can just find the syntax to get data[0].extended_text out of that…

So close.

[ubeaut (Greg)]

YES!!! Got it finally:

=JSON.parse(items.BomMV_Data.state).data[0].extended_text

Output from the above command:
Sunny. Light winds.

Now I don’t need lots of items I just need the one with all the data in it.

[ubeaut (Greg)]

Now for the next problem how to format the date:
=JSON.parse(items.BomMV_Data.state).data[0].date

Gives: 2021-03-14T13:00:00Z

I would like it to be in local time and formatted like Monday 15

Oh well back to the drawing board.

[ubeaut (Greg)]

OK for those who want to know the date format syntax is:
=dayjs(JSON.parse(items.BomMV_Data.state).data[0].date).format(‘dddd MMM D’)

Which gives the output of:
Monday Mar 15

This is what the overview page looks like.

This is what it looks like:

Still a work in progress but it does work.

Thanks @ysc the example you gave me had enough clues in it to get it to do what I wanted.

[ubeaut (Greg)]

Hi.
I have looked at your example but I can’t get it to do what I want which is loop through the json data in the one item I have and change the index number to the next set of data. The json file is weather data and the json format is data[0].whatever What I would like to be able to do is grab any of the data and list it.
Like this:
data[0].short_text
data[1].short_text
data[2].short_text

In other words be able to substitute an index number in between the [] like [indx]
I am new to this stuff and just need an example.

I tried this but it didn’t work:

component: oh-list-item
config:
  style:
    min-width: 250px
    --f7-list-item-after-font-size: 16px
    --f7-list-item-after-font-weight: bold
    --f7-list-item-after-text-color: var(--f7-text-color)
slots:
  default:
    - component: oh-repeater
      config:
        for: day
        in: =JSON.parse(items.BomMV_Data.state)
        fragment: true
      slots:
        default:
          - component: oh-list-item
            config:
              title: =dayjs(loop.day.data[0].date)
              after: =loop.day.data[0].short_text

I am not even sure I am doing this in the right place. I am trying to do it on the overview page:

The black square with nothing beside it is what I am testing, but nothing works.

The data I am pulling down is here: https://api.weather.bom.gov.au/v1/locations/r659gg/forecasts/daily

I thought I was getting to know this works when I finally got the data to display earlier but I really would like to do dynamic variable stuff.
Should I be doing this on the overview page or is this a widget type of exercise?
Any help or clues greatly appreciated.
Thanks