How to dynamically loop all values in a json string

Question

I'm creating a project in Vue.js

I need to loop through a JSON object but can't find out how to access this. what I got:

 "functionality": {
        "uitgifte": {
            "image": "",
            "value": "Handmatige capsule inname en uitgifte",
            "label": "",
            "splash": true,
            "compare": false
        },
        "schakelaar": {
            "image": "",
            "value": "Automatische en programmeerbare aan/uit schakelaar",
            "label": "",
            "splash": true,
            "compare": false
        },
        "kopjesrooster": {
            "image": "",
            "value": "Draaibaar kopjesrooster voor latte macchiato-glazen",
            "label": "",
            "splash": true,
            "compare": false
        },
        "ontkalking": {
            "image": "",
            "value": "Automatische melding voor ontkalking",
            "label": "",
            "splash": true,
            "compare": false
        },
        "kopgroottes": {
            "image": "",
            "value": "Programmeerbare kopgroottes",
            "label": "",
            "splash": true,
            "compare": false
        }
    },

and the html:

<div class="tab">
      <table>
        <tbody>
          <tr>
            <td>{{ main.pageCopy.functionele_specificaties }}</td>
          </tr>
          <tr>
            <td v-for="functionality in machine.functionality.uitgifte.value" :key="functionality">{{ machine.functionality.uitgifte.value }}</td>
            <td>
              <img src="" alt="">
            </td>
          </tr>
        </tbody>
      </table>
    </div>

The part that says machine.functionality.uitgifte.value I need the "uitgifte" part to be dynamic so it loops through all the elements like it in the JSON. So "uitgifte, schakelaar, kopjesrooster" etc.

Would be awesome if anyone knows the trick. Thanks.

Possible duplicate of [How do I loop through or enumerate a JavaScript object?](https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object) — Anthony, Jul 03 '18 at 13:17

Bennett Dams · Accepted Answer · 2018-07-03T15:14:19.073

1

You simply start your for loop at a higher object level:

<div class="tab">
      <table>
        <tbody>
          <tr>
            <td>{{ main.pageCopy.functionele_specificaties }}</td>
          </tr>
          <tr>
            <td v-for="(functionality, index) in machine.functionality" :key="index">
            {{ functionality.value }}</td>
            <td>
              <img src="" alt="">
            </td>
          </tr>
        </tbody>
      </table>
    </div>

BTW: If you have control of the datasource, make sure to provide an ID for each object and use that ID as the key of the v-for loop.

edited Jul 03 '18 at 15:14

answered Jul 03 '18 at 13:17

Bennett Dams

6,463
5
25
45

1

Thanks you very much! That solved it. Will keep that in mind and pass it along to the ones controlling the data. Cheers! – InPixel Jul 03 '18 at 13:34

How to dynamically loop all values in a json string

1 Answers1