CODEWITHSUNDEEP
javascriptvue.jspromise
Андрей Измайлов
Андрей Измайлов

Reputation: 51

Issue whis a promise in VueJS

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"

Upvotes: 0

Views: 76

Answers (2)

Titulum
Titulum

Reputation: 11446

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;
},

Upvotes: 1

Quentin
Quentin

Reputation: 943108

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)

Upvotes: 1

Related Questions