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? — Anthony
– Anthony, Commented Jul 3, 2018 at 13:17

Bennett Dams · Accepted Answer · 2018-07-03 15:14:19Z

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 3, 2018 at 15:14

answered Jul 3, 2018 at 13:17

Bennett Dams

7,1836 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

InPixel Over a year ago

Thanks you very much! That solved it. Will keep that in mind and pass it along to the ones controlling the data. Cheers!

Collectives™ on Stack Overflow

How to dynamically loop all values in a json string

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related