CODEWITHSUNDEEP
vue.js
S.Marx
S.Marx

Reputation: 1022

How to get data from JSON? My v-for loop is not working

I'm trying to get data from a external json but the v-for loops does not work. Previously, with the same code I was able to show the data I don't know whats happens now.

This is the code i'm using:

`

    <div class="row">

        <div class="col-sm-4">
            <h1>Llista Valors</h1>

            <div class="card" style="margin-bottom: 2%" v-for="dada in list">
                <div class="card-header">
                    Hora: {{dada.lists.hora}}
                    Preu: {{dada.lists.preu}}
                </div>
            </div>
        </div>

        <div class="col-sm-8">
            <h1>JSON</h1>

            <pre>
                {{ $data }}
            </pre>

        </div>

    </div>

</div>`

`

    var url = "http://172.17.100.3/api/tarifa2.php";

    new Vue({

        el: '#main',
        created: function () {
            this.getApi();
        },
        data: {
            lists: []
        },
        methods: {
            getApi: function () {

                this.$http.get(url).then(function (response) {
                    this.lists = response.body.valors;

                });
            }

        }

    });

</script>`

This is what i get:

enter image description here

Upvotes: 0

Views: 29

Answers (2)

LShapz
LShapz

Reputation: 1756

For each dada in lists, there is no dada.lists.hora or dada.lists.preu. There is only dada.preu or dada.hora.

Each dada in lists is like saying lists[0] (or whatever index).

So try changing the template to just {{data.hora}} etc as needed (after doing the list/lists adjustment per above).

Upvotes: 1

Steven Spungin
Steven Spungin

Reputation: 29071

Your data should be called list:[], not lists:[] to match your template. Or rename your template to in lists.

Upvotes: 2

Related Questions