Storing API information in an array using vue.js

Question

Storing API information in an array using vue.js

Seeking assistance with this issue. I am attempting to fetch and save the list of users from an API into an array named "name". However, I have tried using a forEach loop without success. Any suggestions on how to resolve this problem would be greatly appreciated. Thank you!

Edit: I have wrapped the function, but it is still not functioning correctly.


import axios from 'axios'

export default {
  data() {
    return {
      info: null,
      name: []
    }
  },
  mounted() {
    axios
      .get('http://localhost:3000/api/users/', { mode: 'no-cors' })
      .then(response => (this.info = response.data))
      .then(() => info.data.forEach(element => {

      }))
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(this.loading = false)

  }
}

javascript vue.js

Answer 1

Answer №1

After reviewing the code provided, it seems that there is an assumption made about the data contained in this.info. However, there are some issues in the code that need to be addressed:

1.

.then(response => (this.info = response.data))
.then(() => info.data.forEach(element => {

}))

It appears that info is undefined. It should likely be changed to this.info instead.

.then(response => (this.info = response.data))
.then(() => this.info.data.forEach(element => {

}))

If you prefer using arrow function syntax and returning an assignment expression, you can also do:

.then(response => (this.info = response.data))
.then(info => info.data.forEach(element => {

}))

However, this may not be ideal as some coding standards discourage returning assignment expressions due to potential readability issues when chaining promises.

2.

The use of forEach can impact Vue's reactivity. Vue may not detect changes with certain assignment syntax like this.name[i] = element. Instead, consider using array methods such as push, or better yet, functional programming operators like map and filter:

.then(() => (this.name = this.info.data.map(element => {

})))

Answer 2

After reviewing the code provided, it seems that there is an assumption made about the data contained in this.info. However, there are some issues in the code that need to be addressed:

1.

.then(response => (this.info = response.data))
.then(() => info.data.forEach(element => {

}))

It appears that info is undefined. It should likely be changed to this.info instead.

.then(response => (this.info = response.data))
.then(() => this.info.data.forEach(element => {

}))

If you prefer using arrow function syntax and returning an assignment expression, you can also do:

.then(response => (this.info = response.data))
.then(info => info.data.forEach(element => {

}))

However, this may not be ideal as some coding standards discourage returning assignment expressions due to potential readability issues when chaining promises.

2.

The use of forEach can impact Vue's reactivity. Vue may not detect changes with certain assignment syntax like this.name[i] = element. Instead, consider using array methods such as push, or better yet, functional programming operators like map and filter:

.then(() => (this.name = this.info.data.map(element => {

})))

Answer 3

Answer №2

Perhaps you need to reconsider the this reference, as callback methods may be in a different context. Here's a revised approach:

export default {
  data () {
    return {
      info: null,
      name: []
    }
  },
  mounted () {
    var that = this;
    axios
      .get('http://localhost:3000/api/users/', {mode: 'no-cors'})
      .then(response => (that.info = response.data))
      .then(info.data.forEach(element => {

      });)
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(this.loading = false)

  }
}

Answer 4

Perhaps you need to reconsider the this reference, as callback methods may be in a different context. Here's a revised approach:

export default {
  data () {
    return {
      info: null,
      name: []
    }
  },
  mounted () {
    var that = this;
    axios
      .get('http://localhost:3000/api/users/', {mode: 'no-cors'})
      .then(response => (that.info = response.data))
      .then(info.data.forEach(element => {

      });)
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(this.loading = false)

  }
}

Answer 5

Answer №3

Make sure to wrap the callback function in a function that accepts the info variable, like this:

import axios from 'axios'

export default {
  data () {
    return {
      info: null,
      name: []
    }
  },
  mounted () {
    axios
      .get('http://localhost:3000/api/users/', {mode: 'no-cors'})
      .then((response) => response.data.forEach(element => {

      }))
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(this.loading = false)

  }
}

Answer 6

Make sure to wrap the callback function in a function that accepts the info variable, like this:

import axios from 'axios'

export default {
  data () {
    return {
      info: null,
      name: []
    }
  },
  mounted () {
    axios
      .get('http://localhost:3000/api/users/', {mode: 'no-cors'})
      .then((response) => response.data.forEach(element => {

      }))
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(this.loading = false)

  }
}

Storing API information in an array using vue.js

Answer №1

Answer №2

Answer №3

Similar questions

Updating the innerHTML of a frameset

`Need help setting the active class for a bootstrap navbar using Angular JS?`

Photos not showing up in Venue Search results from Foursquare API

How do you activate the background color for paragraphs <p> when a bootstrap button is styled with CSS?

Tips on saving all objects, even those that are repeated, in a JavaScript array

Display invoices for multiple users logged in at the same time using Express.js

Adding options for a select tag from JavaScript can be accomplished by using the DOM manipulation methods

"Exploring three.js: Transforming a plane's orthogonal vector into a rotation matrix for the plane

Troubleshooting issue with Highcharts 3D rendering after using setState()

Error: Unable to initialize VueRouter as a constructor

Guide on downloading a PDF file with NodeJS and then transmitting it to the client

Vue fails to receive updates from Firestore until the page is manually refreshed

After being deployed on Vercel, React is mistakenly redirecting to the incorrect file, although it functions properly when

When loading a page for the first time, the Vue.js transition does not take effect

Is there a way to generate random numbers that will create a chart with a general upward trend?

Passing methods from child to parent components in Vue2 looped componentsHere is a

The persistent redirection issue in Node.js - Middleware

What can you tell me about Page Event functionality in Datatables?

Getting the right AngularJS $scope within a controller for beginners

various arbitrary visuals on an HTML5 canvas