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.

Answer 1

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>

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