How to map specializations array with JSON Vue/vuex - vue.js

Question

Hello guys,
// I have one problem with map in Vue.js, how can i map array specializations ? How to display a whole array in 1 div. I would like to make a filter later.
Below it's my JSON file
My JSON file
{
"workers": [
{
"id":1,
"name":"Karolina Water",
"email":"Karolina.water#gmail.com",
"specializations": [
{
"code": "net",
"name": ".NET"
},
{
"code": "react",
"name": "React JS"
}
]
}, {
"id":2,
"name":"Marcelina Wart",
"email":"Marcelina.wart#gmail.com",
"specializations": [
{
"code": "net",
"name": ".NET"
}
]
},
]
}
Below it's my component,
<tr v-for="worker in workers" :key="worker.id">
<th scope="row">{{ worker.id }}</th> //
<td>{{ worker.name }}</td> //
<td>{{worker.specializations[0].name}} </td> //- but i have only 1 value from the array.
<td>go to projects ➡</td>
</tr>
many thanks for your help !

Answer 1

Make a nested v-for.
See it here in action: Vue SFC Playground
<template>
<table border>
<tr v-for="worker in workers" :key="worker.id">
<th scope="row">{{ worker.id }}</th>
<td>{{ worker.name }}</td>
<td>
<div v-for="spec in worker.specializations">
{{spec.code}} - {{spec.name}}
</div>
</td>
</tr>
</table>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {
workers: [
{
id: 1,
name: "Karolina Water",
email: "Karolina.water#gmail.com",
specializations: [
{
code: "net",
name: ".NET",
},
{
code: "react",
name: "React JS",
},
],
},
{
id: 2,
name: "Marcelina Wart",
email: "Marcelina.wart#gmail.com",
specializations: [
{
code: "net",
name: ".NET",
},
],
},
],
};
},
});
</script>