My data returns randomly with every refresh and I don't know why

Question

So I'm building an application in Vue.js and Laravel. I'm currently done with the "ticket" functionality that requests every 'to do' of the company sorted by due date. It renders perfectly organised until a certain point in my code.

This is my Service (fleshdesk.js)

class Freshdesk {

    getIssues() {
        return this.api()
    }

    async api() {

        const response = await axios.request({
            baseURL: `https://glue-customer-support.freshdesk.com/api/v2/tickets?order_by=due_by`,
            method: 'get',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Basic [KEY]',
            }
        });

        return response.data;
    }
}

This is my Vue file (at a certain point my data gets reorganised here). Here's where I request data within a request so I can get a certain ID and look for it in the other table.

data() {
    return {
        issues: [],
    };
},

mounted() {
    Freshdesk.getIssues()
        .then(response => {

            console.log(response);

            for (var i = 0; i < response.length; i++) {

                const issueData = {
                    subject: '',
                    email: '',
                    name: '',
                    company: '',
                    due: '',
                };

                issueData.subject = response[i]['subject'];

                var dueDate = new Date(response[i]['due_by']);
                const months = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"];

                let formatted_date = dueDate.getDate() + " " + months[dueDate.getMonth()];
                issueData.due = formatted_date;

                // THIS IS WHERE MY LIST GETS MESSED UP

                axios.request({
                    baseURL: `https://glue-customer-support.freshdesk.com/api/v2/contacts/` + response[i]['requester_id'],
                    method: 'get',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Basic [KEY]',
                    },
                }).then(contactRes => {

                    issueData.name = contactRes['data']['name'];
                    issueData.email = contactRes['data']['email'];
                    this.issues.push(issueData);

                    if (contactRes['data']['company_id'] == !null) {

                        axios.request({
                            baseURL: `https://glue-customer-support.freshdesk.com/api/v2/companies/` + contactRes['data']['company_id'],
                            method: 'get',
                            headers: {
                                'Content-Type': 'application/json',
                                'Authorization': 'Basic [KEY]',
                            },
                        }).then(companyRes => {
                            issueData.company = companyRes['data']['name'];

                            this.issues.push(issueData);
                            console.log(issueData);

                        });
                    } else {
                        issueData.company = "";
                        this.issues.push(issueData);
                        console.log(issueData);
                    }
                });
            }
        })
        .catch(error => {
            console.log('There was an error:', error.response);
        });
},

and it finally gets shown like this, also in my Vue file:

<template>
  <tile :position="position">
    <div class="grid gap-padding h-full markup">
      <ul class="align-self-center">
        <h1>Freshdesk</h1>

        <li v-for="issue in issues">
          <div class="my-2">
            <p>{{issue['subject']}}</p>
            <p>{{issue['name']}}</p>
            <p>{{issue['email']}}</p>
            <p v-if="issue['company']!== ''">{{issue['company']}}</p>
            <p>{{issue['due']}}</p>
          </div>
        </li>
      </ul>
    </div>
  </tile>
</template>

so as you can see my data gets rendered in a view template. The problem is that every time I refresh the page the data is organised differently. (eg it goes like 16 16 16 16 14 15 16) or the other way around. I want it to show the data with the closest due date first. What am I not seeing? Something about my axios formatting that's messy?

You are running async requests in a for loop. They essentially all start at the same time, so they will finish pretty much in a random order, yes. If you want to keep the order, use Promise.all(). axios also has a built-in way to do this: https://stackoverflow.com/questions/43664566/is-it-possible-to-use-axios-all-with-a-then-for-each-promise` — , May 07 '19 at 15:08
I barely looked at your code, but my first thought is cached javascript. Is your javascript code using a prior cached version? — jeffld, May 07 '19 at 15:08
Security Note: You should take care of not posting that API Key or any secure credential in the future. As you have already posted publicly here, make sure you change it or request a new key. I know it work as a real key because we can simply `curl -H "Authorization: Basic SXFKU1B0UHJYcEtPRDZzTXlnWDpY" https://glue-customer-support.freshdesk.com/api/v2/tickets?order_by=due_by` — Noogen, May 07 '19 at 16:21

My data returns randomly with every refresh and I don't know why

0 Answers0