How to create a dynamic table with vue js - node.js

Question

I have a question. How to create a dynamic table with vue js.
I want to render this json file into the table using Vue but it doesn't happen as I want. I want the data in two languages and app_adi but only the latest data is coming. How can I display both?
json file
{
"accounts":{
"user":{
"_id":"5a500vlflg0aslf011ld0a25a5",
"username":"john",
"id":"59d25992988fsaj19fe31d7",
"name":"Test",
"customer":" John Carew",
},
"application":[
{
"app_id":"5af56pi314-y1i96kdnqs871nih35",
"language":"es"
},
{
"app_id":"5af56pi314-blvinpgn4c95ywyt8j",
"language":"en"
}
]
}
}
I want to build this table:
username customer language app_di
john John Carew es 5af56pi314-y1i96kdnqs871nih35
en 5af56pi314-blvinpgn4c95ywyt8j

Answer 1

Preprocess your json in a computed property.
In your example you just need to add the "user" properties to the first "application" item.
new Vue({
el: '#app',
data() {
return {
columns: {
username: 'Name',
customer: 'Customer',
language: 'Language',
app_id: 'App_ID'
},
userData: {
"user": {
"_id": "5a500vlflg0aslf011ld0a25a5",
"username": "john",
"id": "59d25992988fsaj19fe31d7",
"name": "Test",
"customer": " John Carew",
},
"application": [{
"app_id": "5af56pi314-y1i96kdnqs871nih35",
"language": "es"
},
{
"app_id": "5af56pi314-blvinpgn4c95ywyt8j",
"language": "en"
}
]
}
}
},
computed: {
tableData() {
return this.userData.application.map((x, index) => {
return index === 0 ? Object.assign(x, this.userData.user) : x
})
}
}
})
Here is a working example: https://jsfiddle.net/ellisdod/jm3snwxc/2/