0

I have this method :

 callHttp( isRefreshed ) {
    // Prepare the data
    let importData = {
        token: this.mappingData.token,
        xml_file_url: this.mappingData.xml_file_url,
        name: this.mappingData.mapping_name,
        encoding: this.mappingData.encoding,
        auth_info: this.mappingData.auth,
        category_delimitor : this.mappingData.category_delimitor,
    };
    // Show the loading
    this.loadDone = true;
    // Get the mapping fields
    http.post("projects/import", importData)
        .then((response) => {
            let res = response.data;
            if (res.status !== "ready") {
                setTimeout(()=>{
                    //_this.mappingData.projectFieldOptions = [];
                    this.callHttp( isRefreshed );
                    this.loadDone = true;
                }, 5000);
            } else if (res.status === "ready") {
                // if no fields name found
                this.countHTTP == 0;

                if (res.field_names === false) {
                    this.loadDone = false;
                    this.hasMappingError = true;
                } else {
                    this.loadDone = false;
                    this.isRefreshing = false;
                    this.hasMappingError = false;
                    this.mappingData.id_feed = res.id_feed;
                    this.id_mapping_processing = res.id_mapping_processing;
                    this.projectToken = res.id_project;
                    
                    if( isRefreshed ) {
                        //_this.mappingData.newProjectFieldOptions = [];
                        res.field_names.forEach(function (item, index) {
                            this.mappingData.newProjectFieldOptions.push({
                                value: item,
                                text: "Do Not Import",
                                custom: null,
                            });
                        });
                        // Combined the old mapping data with the new one and remove duplicate key/value
                        const filteredProjectFieldOptions = [...new Map([...this.mappingData.newProjectFieldOptions, ...this.mappingData.projectFieldOptions]
                            .map((item) => [item.value, item])).values()];
                        this.mappingData.projectFieldOptions = [];
                        this.mappingData.projectFieldOptions = filteredProjectFieldOptions;
                        
                    } else {
                        //_this.mappingData.projectFieldOptions = [];
                        res.field_names.forEach(function (item, index) {
                            this.mappingData.projectFieldOptions.push({
                                value: item,
                                text: "Do Not Import",
                                custom: null,
                            });
                        });
                    }
                }
            }
        })
        .catch((error) => {
            console.log(error);
        });
},

Now, after this } else if (res.status === "ready") { statement I get an error on the console log :

TypeError: this is undefined

Can you tell me how can I fix it?

I can use let _this = this but I don't want to use this.

Shibbir
  • 1,963
  • 2
  • 25
  • 48
  • You shouldn't need to use `let _this` because it's an arrow function. – Barmar Aug 12 '22 at 16:22
  • I'm not entirely sure but `this.callHttp( isRefreshed );` might call `callHttp` without the current `this` context. What happens if you use `this.callHttp.call(this, isRefreshed);` instead? – Marco Aug 12 '22 at 16:22
  • Because I don't see any other issues with your code at first glance. – Marco Aug 12 '22 at 16:24
  • @marco-a What's suspicious about that? That's the correct way to call a method on the current object, there's no need to use `.call()` – Barmar Aug 12 '22 at 16:24
  • 1
    You get the error because of `forEach(function`. – Estus Flask Aug 12 '22 at 16:28
  • @marco-a Vue methods are already bound to correct `this` – Estus Flask Aug 12 '22 at 16:29
  • @Barmar I said suspicious because I didn't see any other issues with the code OP provided - Well, on the section OP claimed that error originated from. – Marco Aug 12 '22 at 16:29
  • I also don't see any other problems with it. And that line isn't even the one that's getting the error. – Barmar Aug 12 '22 at 16:30
  • @EstusFlask can you tell me whats the issues here? – Shibbir Aug 12 '22 at 16:30
  • @EstusFlask Your dupe closure doesn't make sense. Using an arrow function is one of the solutions to that problem, and that's what this code does. – Barmar Aug 12 '22 at 16:31
  • @Barmar Yes, but OP's error's description was very vague to begin with. – Marco Aug 12 '22 at 16:32
  • @EstusFlask should i use arrow instead? – Shibbir Aug 12 '22 at 16:32
  • What is the exact line where the error is happening? – Barmar Aug 12 '22 at 16:33
  • `} else if (res.status === "ready") {` is not a good description of where the error came from. There's something called a **stack trace** which is automatically displayed in any modern browser - Why OP didn't include that? I don't know, but it makes me assume that he's a beginner. – Marco Aug 12 '22 at 16:34
  • https://prnt.sc/9JXzELzaqg4a this is what i can see on the console log. – Shibbir Aug 12 '22 at 16:35
  • @EstusFlask You are right. if I use arrow function instead of normal function it's working :) – Shibbir Aug 12 '22 at 16:39
  • @Shibbir `() => {}` arrow functions automatically preserve the current `this` context. If you wanted, you could achieve the same (and keep the `function` keyword) by doing: `res.field_names.forEach((function(item, index) { }).bind(this))` of course this is taking more space than simply an arrow function (hence their invention) - anyway, that was more to explain the difference between `function` and the arrow functions. – Marco Aug 12 '22 at 16:44
  • @marco-a Thank You very much, I got the idea. – Shibbir Aug 12 '22 at 16:58

0 Answers0