[Vuejs]-How can I retrieve data from an array which is inside another array and display it in the table?

by

0👍

✅

You are iterating over jobs and not each task inside the job's tasks

You should do something like – 

        <tr v-for="work in jobs">
          <td>{{work["id"]}}</td>
          <td>{{work["description"]}}</td>
          <td>{{work["location"]}}</td>
          <td v-for="task in work.tasks" >{{task["id"]}} -
 {{task["description"]}} - {{task["location"]}}</td>
        </tr>

Or however you want to display there. But the idea should be to iterate on the tasks array inside each work object

0👍

You’ll need to explicitly extract the fields that you want to show from tasks. Also, the syntax for the nested v-for would be something like task in work.tasks, so that your task points to each task inside of your tasks array for each work:

<tr v-for="work in jobs">

    <td>{{work["id"]}}</td>
    <td>{{work["description"]}}</td>
    <td>{{work["location"]}}</td>

    <td v-for="task in work.tasks">
        {{task["id"]}} <br>
        {{task["description"]}} <br>
        {{task["location"]}}
    </td>
</tr>

Leave a comment