Dynamically loop through JSON object

Add-ons UIs
1

How can I loop through a JSON object dynamically, so that it outputs all key labels and values? Lets assume we have the following structure but we do not know the names of keys: {“A”:“1”,“B”:“2”,…}

component: f7-block
config:
slots:
  default:
    - component: oh-repeater
      config:
        for: i
        fragment: true
        in: =JSON.parse('[{"A":"1","B":"2"}]')
        sourceType: array
      slots:
        default:
          - component: Label
            config:
              text: =loop.i[i_idx][0]
          - component: Label
            config:
              text: =loop.i[i_idx][1]

Desired output:
A
1
B
2

This code does not work, it is just here for describing the question.

2

I don’t think you can. To get a list of the keys of an object without foreknowledge of them requires the keys object method and I’m pretty sure that not available in the expression parser.

If there’s absolutely no other way of formatting this input, then you might be able to stringify the object and run it through a sufficiently complicated regex to extract an array of the key names. Then you would have to use that array as the input of a second repeater nested in the first.

3

A different approach would be to convert the data into a simple array, or an array of key,value, i.e.

[ [ "A", "1"], ["B", "2"]]