Issue whis a promise in VueJS

Question

I stack here today. I make an axios call to my api. On succes response I run the function and make a chart on my page from recived data.

It work fine while I leave all aditional transformation inside the method

        mounted() {
            this.month = moment().month("June").format("YYYY-MM");
            axios.get('/data/statistic2/'+this.month)
                .then(response => {
                    this.set = response.data;
                    this.generateChart(response.data);
                })
        },

        methods: {

            generateChart(input) {
                let data = [];
                input.forEach(function(row) {
                    let item = {};
                    item.day = row.day;
                    let timeArray = [row.time1, row.time2,row.time3,row.time4,row.time5];
                    let result = timeArray.filter(function(item) {
                            return item !== null;
                        }).reduce((prev, current) => parseInt(prev) + parseInt(current)); 
                    item.time = result;
                    data.push(item);    
                })
                this.datachart = data;
            },

But when I try to incapsulate this bit of logic in separate method

        mounted() {
            this.month = moment().month("June").format("YYYY-MM");
            axios.get('/data/statistic2/'+this.month)
                .then(response => {
                    this.set = response.data;
                    this.generateChart(response.data);
                })
        },

        methods: {

            generateChart(input) {
                let data = [];
                input.forEach(function(row) {
                    let item = {};
                    item.day = row.day;                 
                    item.time = convertTimeFromDB(row);
                    data.push(item);    
                })
                this.datachart = data;
            },

            convertTimeFromDB(row) {
                let timeArray =  [row.time1, row.time2,row.time3,row.time4,row.time5];
                return timeArray.filter(function(item) {
                        return item !== null;
                    }).reduce((prev, current) => parseInt(prev) + parseInt(current));

            },

I got "Uncaught (in promise) ReferenceError: convertTimeFromDB is not defined"

score 1 · Answer 1 · answered Feb 25 '20 at 12:11

1

This has nothing to do with promises.

convertTimeFromDB is a property of the methods object. It isn't a variable (in scope or otherwise).

You have to refer to it in the context of the object (e.g. whatever.methods.convertTimeFromDB)

answered Feb 25 '20 at 12:11

Quentin

914,110
126
1,211
1,335

Titulum · Accepted Answer · 2020-02-25T12:32:45.957

1

You should change convertTimeFromDB(row) to this.convertTimeFromDB(row), and change the function(row) {} to an arrow function (row => {}):

generateChart(input) {
  let data = [];
  input.forEach((row) => {
    let item = {};
    item.day = row.day;                 
    item.time = this.convertTimeFromDB(row);
    data.push(item);    
  })
  this.datachart = data;
},

edited Feb 25 '20 at 12:32

answered Feb 25 '20 at 12:12

Titulum

9,928
11
41
79

Oh okay, but why is the `axios.get` method able to call `this.generateChart`? – Titulum Feb 25 '20 at 12:21
https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-exchangeable – Quentin Feb 25 '20 at 12:25
1

You need to convert `forEach` callback to arrow function in order to make it work. And I would use `map` instead of `forEach` – Eldar Feb 25 '20 at 12:31
Whoops indeed! I missed that `function(row)` statement, now I understand what @Quentin means. I updated my post. – Titulum Feb 25 '20 at 12:33

Issue whis a promise in VueJS

2 Answers2