Exploring the process of searching for an id within an array of objects received through axios in Vue 2

Question

Exploring the process of searching for an id within an array of objects received through axios in Vue 2

I am currently working on verifying whether the user is included in the list that I retrieve using axios. However, I am facing an issue where the FILTER option I have used consistently returns undefined or [], even when the user does exist in the array.

At this point, I am at a loss for what else to try. I have tried validating by checking the data returned with console.log() but haven't been able to make progress.

    created() {
        this.getStagesDefault()
        this.getSalesman()
        this.getStagesAmountByUser()
    },
    methods: {
        async getSalesman(){
            const { data } = await axios.get('salesman')
            this.employees = data.data
        },
        getStagesAmountByUser(){
            console.log(this.user['id'])
            var objectUser = this.employees.filter(elem => {
                return elem.id === this.user['id']
            })

            console.log(objectUser)
        },

Console

https://i.sstatic.net/gaeCe.png

Vue data

https://i.sstatic.net/vHkCV.png

javascript vue.js vuejs2

Answer 1

Answer №1

One key point to note is that the method getSalesman operates asynchronously, implying that getStagesAmountByUser will commence executing before getSalesman completes.

To address this issue, there are two possible solutions:

Utilize the await keyword with the getSalesman method, but ensure that the containing method (in this case created) is also marked as async. Modify the code as shown below:

async created() {
    this.getStagesDefault()
    await this.getSalesman()
    this.getStagesAmountByUser()
}

Implement a .then callback after the getSalesman function call, and trigger the subsequent action inside this callback. Adjust the code as follows:

created() {
    this.getStagesDefault()
    this.getSalesman().then(() => this.getStagesAmountByUser())
}

Answer 2

One key point to note is that the method getSalesman operates asynchronously, implying that getStagesAmountByUser will commence executing before getSalesman completes.

To address this issue, there are two possible solutions:

Utilize the await keyword with the getSalesman method, but ensure that the containing method (in this case created) is also marked as async. Modify the code as shown below:

async created() {
    this.getStagesDefault()
    await this.getSalesman()
    this.getStagesAmountByUser()
}

Implement a .then callback after the getSalesman function call, and trigger the subsequent action inside this callback. Adjust the code as follows:

created() {
    this.getStagesDefault()
    this.getSalesman().then(() => this.getStagesAmountByUser())
}

Answer 3

Answer №2

fetchSalesperson is a function that returns data asynchronously. When the filter is applied, the array being filtered is still empty.

this.fetchSalesperson()            // this operation occurs later
this.calculateTotalSales()  // this operation occurs immediately

To ensure that the functions are executed sequentially by waiting for the asynchronous method to complete:

await this.fetchSalesperson()
this.calculateTotalSales()

Answer 4

fetchSalesperson is a function that returns data asynchronously. When the filter is applied, the array being filtered is still empty.

this.fetchSalesperson()            // this operation occurs later
this.calculateTotalSales()  // this operation occurs immediately

To ensure that the functions are executed sequentially by waiting for the asynchronous method to complete:

await this.fetchSalesperson()
this.calculateTotalSales()

Answer 5

Answer №3

To optimize performance, it is recommended to pass the id to the backend for selecting data instead of filtering on the clientside.

Remember that the 'created' method is only called once unless the component is destroyed, so be mindful of updating your method when the user.id changes.

Always wrap asynchronous code in a try/catch block to handle errors gracefully, ensuring a smooth user experience even when a user or salesman is not found. You can also customize error messages instead of relying on console.error.

{
  data: () => ({
    employee: {}
  }),
  watch: {
    'user.id' (v) {
      if (v) this.getEmployee()
    }
  },
  created() {
    this.getEmployee()
  },
  methods: {
    getEmployee() {
      if (typeof this.user.id === 'undefined') return

      try {
        const {
          data
        } = await axios.get(`salesman/${this.user.id}`)

        this.employee = data.data
      } catch (e) {
        console.error(e)
      }
    }
  }
}

Answer 6

To optimize performance, it is recommended to pass the id to the backend for selecting data instead of filtering on the clientside.

Remember that the 'created' method is only called once unless the component is destroyed, so be mindful of updating your method when the user.id changes.

Always wrap asynchronous code in a try/catch block to handle errors gracefully, ensuring a smooth user experience even when a user or salesman is not found. You can also customize error messages instead of relying on console.error.

{
  data: () => ({
    employee: {}
  }),
  watch: {
    'user.id' (v) {
      if (v) this.getEmployee()
    }
  },
  created() {
    this.getEmployee()
  },
  methods: {
    getEmployee() {
      if (typeof this.user.id === 'undefined') return

      try {
        const {
          data
        } = await axios.get(`salesman/${this.user.id}`)

        this.employee = data.data
      } catch (e) {
        console.error(e)
      }
    }
  }
}

Exploring the process of searching for an id within an array of objects received through axios in Vue 2

Answer №1

Answer №2

Answer №3

Similar questions

Render a component in certain routes based on specific conditions in React

The file that is currently being downloaded has the .pptx extension, but it is being

Utilizing a custom keyboard with Jquery for a recurring function

Autocomplete feature in MUI allows filtering to begin after typing at least 3 characters

I am having difficulty accessing the dataset on my flashcard while working with React/Next JS

The HTML code may fade away, but the JavaScript is still up and running behind the

What is the best way to display a loading animation until the entire wizard has finished loading in the jQuery-steps

ClassSerializerInterceptor in NestJS does not show the _id field

Error in Webpack 5: Main module not found - Unable to locate './src'

Switch out multiline text with javascript

Insert a new class within the container div

Node.js poses a challenge when it comes to decoding incoming request data

Is there a way for me to access the source code of elements within React Native?

What could be causing this code to fail in making changes to the HTML document?

Cypress, encountering issues with If/Else or Switch Case implementations

Caution when using a React form: Value of `true` has been detected for a non-boolean attribute `validate`

Exploring the chosen choice in the Material Design Lite select box

Can you help me with sorting asynchronous line points for KineticJS?

Is it possible that jest is unable to catch the exception?

Setting the default month for the Vuetify date picker