'Can't extract data from JSON files into Arrays in Vuejs
I am working on an issue tacking system for a university project. I am trying to split a JSON file that I receive from the API call to the server into 3 separate arrays in Vuejs. However the arrays Open, InProgress, and Completed remain empty, and in the methods OpenIssues(), InProgressIssues(), and CompletedIssues(), issue in the for loop is undefined.
One thing to note is that is I add something like <h2> {{issues}} </h2> somewhere suitable in the template, I get all the issues in the JSON file. This means that the method getIssuesList() is working correctly and adding the data to issues. But somehow, issues is empty in the other methods (except getIssueStatus())
Is it related to how I'm initializing the lists in data? Or how I use issues in the other methods? Template
<template>
<v-container>
<v-row wrap>
<v-col xl="4" lg="4" md="4" sm="4" xs="12">
<v-card>
<v-card-title class="blue lighten-4">
<span class="white--text">Open</span>
</v-card-title>
<v-divider horizontal></v-divider>
<v-card-text class="blue lighten-4">
<draggable class="list-group kanban-column" :list="Open" group="tasks">
<v-card
class="#f4f5fa"
style="height:40px; margin-top:10px"
v-for="issue in Open"
:key="issue"
align-center
elevation="3"
>
<router-link
class="d-flex align-center text-decoration-none grey--text"
:to="{ name: 'IssuePage', params: { id: issue.id, issue } }"
>
{{ issue.title }}
</router-link>
</v-card>
</draggable>
</v-card-text>
</v-card>
</v-col>
<v-col xl="4" lg="4" md="4" sm="4" xs="12">
<v-card>
<v-card-title class="light-green lighten-4">
<span class="white--text">In Progress</span>
</v-card-title>
<v-divider horizontal></v-divider>
<v-card-text class="light-green lighten-4">
<draggable class="list-group kanban-column" :list="InProgress" group="tasks">
<v-card
class="#f4f5fa"
style="height:40px; margin-top:10px"
v-for="issue in InProgress"
:key="issue"
align-left
elevation="3"
>
<router-link
class="d-flex align-center text-decoration-none grey--text"
:to="{ name: 'IssuePage', params: { id: issue.id, issue } }"
>
{{ issue.title }}
</router-link>
</v-card>
</draggable>
</v-card-text>
</v-card>
</v-col>
<v-col xl="4" lg="4" md="4" sm="4" xs="12">
<v-card>
<v-card-title class="orange lighten-4">
<span class="white--text">Completed</span>
</v-card-title>
<v-divider horizontal></v-divider>
<v-card-text class="orange lighten-4">
<draggable class="list-group kanban-column" :list="Completed" group="tasks">
<v-card
class="#f4f5fa"
style="height:40px; margin-top:10px"
v-for="issue in Completed"
:key="issue"
align-left
elevation="3"
>
<router-link
class="d-flex align-center text-decoration-none grey--text"
:to="{ name: 'IssuePage', params: { id: issue.id, issue } }"
>
{{ issue.title }}
</router-link>
</v-card>
</draggable>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
Script
<script>
import draggable from 'vuedraggable'
import axios from 'axios'
export default {
data() {
return {
issues: [],
status: [],
Open: [],
InProgress: [],
Completed: [],
}
},
components: {
draggable,
},
mounted() {
this.getIssuesList(),
this.getIssueStatus(),
this.OpenIssues(),
this.InProgressIssues()
this.CompletedIssues()
},
methods: {
OpenIssues: function() {
for (const issue of this.issues) {
if (issue.issueStatusId == this.status[0].id) {
this.Open.push(issue)
}
}
},
InProgressIssues: function() {
for (var issue of this.issues) {
if (issue.issueStatusId == this.status[1].id) this.InProgress.push(issue)
}
},
CompletedIssues: function() {
for (var issue of this.issues) {
if (issue.issueStatusId == this.status[2].id) this.Completed.push(issue)
}
},
getIssuesList() {
axios
.get('https://fadiserver.herokuapp.com/api/v1/my-issues/')
.then(response => {
this.issues = response.data
})
.catch(error => {
console.log(error)
})
},
getIssueStatus() {
axios
.get('https://fadiserver.herokuapp.com/api/v1/my-status/')
.then(response => {
this.status = response.data
})
.catch(error => {
console.log(error)
})
},
},
}
</script>
Issues JSON Sample
[
{
"id": "443845ca-a072-44ac-b8c1-233fc88471ee",
"created": "2022-02-25T17:11:57.353930Z",
"title": "Issue 1",
"description": "",
"time_estimate": 2.0,
"userid": "86a08746-9c88-45ab-a151-0cd2c8a65440",
"projectid": "eec5b2ca-8afa-4336-965d-abbe349c1ffd",
"issueTypeId": "7dd28461-1d7c-4346-8f63-bb957934e98c",
"issueStatusId": "c3ed3f0e-8276-4981-b826-24b88c050967",
"issueSeverityId": "ab0cdab4-255b-4c69-994f-766d878a19ce"
},
{
"id": "21d2a143-ae22-4ee6-9326-3a1d649149e7",
"created": "2022-02-25T17:12:20.188266Z",
"title": "Issue 2",
"description": "",
"time_estimate": 3.0,
"userid": "86a08746-9c88-45ab-a151-0cd2c8a65440",
"projectid": "eec5b2ca-8afa-4336-965d-abbe349c1ffd",
"issueTypeId": "7dd28461-1d7c-4346-8f63-bb957934e98c",
"issueStatusId": "1d463b08-fb2b-4d10-ab1c-31e4b5366d2e",
"issueSeverityId": "31bcb818-29d1-449a-8a12-90c8c6bb407f"
},
{
"id": "0618f66b-5d9b-4062-8126-ee19006f5726",
"created": "2022-02-25T17:12:35.753812Z",
"title": "Issue 3",
"description": "",
"time_estimate": 4.0,
"userid": "86a08746-9c88-45ab-a151-0cd2c8a65440",
"projectid": "eec5b2ca-8afa-4336-965d-abbe349c1ffd",
"issueTypeId": "7dd28461-1d7c-4346-8f63-bb957934e98c",
"issueStatusId": "2d4dc5b1-989e-4b7d-8116-775a19484d74",
"issueSeverityId": "ab0cdab4-255b-4c69-994f-766d878a19ce"
},
{
"id": "3a2be386-ba87-4860-a435-0f6ed4256b16",
"created": "2022-02-25T17:12:54.626151Z",
"title": "Issue 4",
"description": "",
"time_estimate": 3.0,
"userid": "86a08746-9c88-45ab-a151-0cd2c8a65440",
"projectid": "eec5b2ca-8afa-4336-965d-abbe349c1ffd",
"issueTypeId": "7dd28461-1d7c-4346-8f63-bb957934e98c",
"issueStatusId": "c3ed3f0e-8276-4981-b826-24b88c050967",
"issueSeverityId": "a5ace7eb-0074-4095-a7b1-71664dc66332"
},
{
"id": "c5b038e2-b315-4c22-9331-32d8aacee072",
"created": "2022-02-25T17:13:08.830381Z",
"title": "Issue 5",
"description": "",
"time_estimate": 4.0,
"userid": "86a08746-9c88-45ab-a151-0cd2c8a65440",
"projectid": "eec5b2ca-8afa-4336-965d-abbe349c1ffd",
"issueTypeId": "7dd28461-1d7c-4346-8f63-bb957934e98c",
"issueStatusId": "1d463b08-fb2b-4d10-ab1c-31e4b5366d2e",
"issueSeverityId": "f8d1f487-497f-4cbb-8ae5-53e10b91e8c5"
},
{
"id": "090d9753-4f6b-4811-8a82-6ba23283eb50",
"created": "2022-02-25T17:13:22.861138Z",
"title": "Issue 6",
"description": "",
"time_estimate": 4.0,
"userid": "86a08746-9c88-45ab-a151-0cd2c8a65440",
"projectid": "eec5b2ca-8afa-4336-965d-abbe349c1ffd",
"issueTypeId": "7dd28461-1d7c-4346-8f63-bb957934e98c",
"issueStatusId": "2d4dc5b1-989e-4b7d-8116-775a19484d74",
"issueSeverityId": "a5ace7eb-0074-4095-a7b1-71664dc66332"
}
]
Status JSON Sample
[
{
"id": "c3ed3f0e-8276-4981-b826-24b88c050967",
"title": "Open"
},
{
"id": "1d463b08-fb2b-4d10-ab1c-31e4b5366d2e",
"title": "In Progress"
},
{
"id": "2d4dc5b1-989e-4b7d-8116-775a19484d74",
"title": "Completed"
}
]
Solution 1:[1]
Try to wait for responses:
async mounted() {
await this.getIssuesList()
await this.getIssueStatus()
this.OpenIssues()
this.InProgressIssues()
this.CompletedIssues()
},
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |