parse json in html from vue js

Question

I am new to Vue js.

I am trying to parse json into the html table with

<tr v-for="(item) in products">
   <td>{{item.id}}</td>
</tr>

but the table prints empty rows. and if i try to print

<td>{{item}}</td>

then each row print single character of the json.

my json : "{id: 'mu'}"

here is the screenshot of the table that prints single character

where I am wrong. Please, a little guidance would help.

var app4 = new Vue({
el: '#Itemlist',
data: {
    products: []
},

mounted: function (){
    var self = this;
    $.ajax ({
        url: "getAll",
        method: "GET",
        success: function (data) {
            self.products = "{id: 'mu'}";
        },
        error: function(error) {
            console.log(error)
        }
    });
}

})

@ChrisDixon I tried this too, but now 2 more empty rows are added. — Muneeb
– Muneeb, Commented May 8, 2018 at 11:24
You're setting products to a string, rather than an array... I'll add the answer. — Chris Dixon
– Chris Dixon, Commented May 8, 2018 at 11:35

Chris Dixon · Accepted Answer · 2018-05-08 11:36:34Z

1

var app4 = new Vue({
el: '#Itemlist',
data: {
    products: []
},

mounted: function (){
    var self = this;
    $.ajax ({
        url: "getAll",
        method: "GET",
        success: function (data) {
            // this is your issue
            //self.products = "{id: 'mu'}";

            self.products.push({id: 'mu'});
        },
        error: function(error) {
            console.log(error)
        }
    });
}

})

answered May 8, 2018 at 11:36

Chris Dixon

9,1777 gold badges38 silver badges69 bronze badges

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

1 Comment

Chris Dixon Over a year ago

No problem! Happy to help.

Collectives™ on Stack Overflow

parse json in html from vue js

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