Can I save Vue output as a Javascript array?

Question

My Vue code below loads data from a database on page load. I know how to display it in a HTML file by using simple Vue methods. However, I want to save it as a Javascript array. The Javascript array will then be fed into a map (the map requires a Javascript array). Can I do so, and if so how?

var app = new Vue({
  el: '#purchase',
  mounted: function() {
    this.allPurchases()
  },
  data: {
    purchases: ""
  },
  methods: {
    allPurchases: function(){

      axios.get('http://localhost:3000/')
      .then(function (response) {
         console.log(response);
         app.purchases = response.data;
      })
      .catch(function (error) {
         console.log(error);
      });
    },
  },

});

When I do console.log(response.data), I get "Uncaught ReferenceError: response is not defined" — wwl
– wwl, Commented Aug 19, 2019 at 21:48
Response is undefined? - my first thought was everything is fine and res.data is undefined. As you can add as many props to an object as you like(memory). And app is hoisted and accessed passt declaration/assingment. — Estradiaz
– Estradiaz, Commented Aug 19, 2019 at 22:18

Boussadjra Brahim · Accepted Answer · 2019-08-19 21:53:32Z

2

You should replace app.purchases by this.purchases :

var app = new Vue({
  el: '#purchase',
  mounted: function() {
    this.allPurchases()
  },
  data() {
    return{
       purchases: []
      }

  },
  methods: {
    allPurchases: function(){

      axios.get('http://localhost:3000/')
      .then( (response) =>{
         console.log(response);
         this.purchases = response.data;
         window.purchases = response.data;//to be used globally
      })
      .catch(function (error) {
         console.log(error);
      });
    },
  },

});

edited Aug 19, 2019 at 21:53

answered Aug 19, 2019 at 21:30

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

wwl Over a year ago

Thanks. But when I call console.log(purchases) in the main HTML file (or even later on in the Javascript file), I still get the error "Uncaught ReferenceErrror: purchases is not defined". What else do I need to do? (Calling purchases only works when I use the console in Chrome's developer tools)

Boussadjra Brahim Over a year ago

do you want to use purchases outside of Vue instance ? and how do you want to use it?

wwl Over a year ago

I want to save it as a Javascript array, which will then be fed into a map. (The purchase data contains geocoordinates of the buyers, and the map needs a Javascript array, with each element containing geocoordinates of the buyer)

Boussadjra Brahim Over a year ago

window.purchases = response.data allows use to use that array globally, you could access it inside the browser console, see the edited answer

wwl Over a year ago

I see. How do I call the variable then? console.log(window.purchases) gives me undefined, and console.log(purchases) gives me an uncaught reference error

|

Sølve · Accepted Answer · 2019-08-19 21:30:19Z

0

Simply change app.purchases = to this.purchases =

answered Aug 19, 2019 at 21:30

Sølve

4,5162 gold badges23 silver badges35 bronze badges

Collectives™ on Stack Overflow

Can I save Vue output as a Javascript array?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related