VueJS Accessing JSON Data

Question

I am accessing data via an API I would like to display in a list. I am testing VueJS right now and have trouble displaying it properly.

The data is:

{

  "data": [
    {
      "userReference": "R100",
      "responderStatus": 0,
      "location": {
        "latitude": 100,
        "longitude": 100,
        "distance": null
      },
      "featureTypeId": 1
    }
  ],
  "pagination": {
    "total": 1,
    "perPage": 10,
    "lastPage": 1,
    "nextPageUrl": null,
    "prevPageUrl": null,
    "from": 1,
    "to": 1,
    "totalPages": 1,
    "currentPage": 1,
    "hasMorePages": false
  }
}

The HTML:

<div class="wrapper wrapper-content animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center m-t-lg">
                            <h1>MEDIFAKTOR server</h1>
                        </div>

                        <div id="app">
                            <ul class="list-group">
                                <li v-for="responder in responders">@{{ responder[0] }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
    </div>

VueJS:

var app = new Vue({
    el: '#app',
    data: {
        responders: []
    },
    mounted: function() {
        $.get('/api/v1/responders', function(data) {
            app.responders = data;
        })

I only want to display the "userReference" per list item.

Saurabh · Accepted Answer · 2017-02-05 14:33:46Z

6

You have to iterate over responders.data as it is the array you have to loop and than you can just access userReference like: {{responder.userReference }}. You should be able to do it like following:

<div id="app">
    <ul class="list-group">
        <li v-for="responder in responders.data">{{ responder.userReference }}</li>
    </ul>
</div>

edited Feb 5, 2017 at 14:33

answered Feb 5, 2017 at 14:30

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

1 Comment

sesc360 Over a year ago

nice!! Now that I see how, looks easy! :)

Collectives™ on Stack Overflow

VueJS Accessing JSON Data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related