Как я могу загрузить файл JSON внутри класса javascript [duplicate]

Question

Как я могу загрузить файл JSON внутри класса javascript [duplicate]

1

Я попытался загрузить JSON файл внутри класса js. Загруженные данные доступны внутри функции.

 class MakePage {
     constructor() {
        var request=new XMLHttpRequest();
        request.open('GET','daten.json');
        request.responseType='json';
        request.send();
        request.onload=function() {
            this.daten=request.response;
            alert(this.daten[1].Name); // this works
        }       
    }
    test(name) {
        document.getElementById(name).innerHTML=this.daten[1].Name;
    }
}

page=new MakePage();
page.test("xyz"); //  TypeError: this.daten is undefined

Как сохранить загруженные данные в члене класса?

EDIT: Спасибо за ответы. Я попробовал self = this, bind (this) и оператор стрелки, но всегда получаю ту же ошибку TypeReference.

Mark Meisner 16 июль 2018, в 10:12

Источник

1

@31piy 31piy this проблема.
sjahan 16 июль 2018, в 07:58
0

@sjahan - Может быть, но даже если вы решите это, код все равно не будет работать, пока не завершится AJAX.
31piy 16 июль 2018, в 07:59

Теги:

javascript

class

json

4 ответа

Ещё вопросы

@sjahan - Может быть, но даже если вы решите это, код все равно не будет работать, пока не завершится AJAX.

sjahan · Answer 1 · 2018-07-16T06-49-00.000Z

Просто замените функцию обратного вызова функцией стрелки. Когда вы это сделаете:

this.daten=request.response

this не то, что вы думаете.) Использование функции стрелки не изменит значение this и на самом деле это будет то, что вы ожидаете.

class MakePage {
     constructor() {
        var request=new XMLHttpRequest();
        request.open('GET','daten.json');
        request.responseType='json';
        request.send();
        request.onload = () => {
            this.daten=request.response;
            alert(this.daten[1].Name); // this works
        }       
    }
    test(name) {
        document.getElementById(name).innerHTML=this.daten[1].Name;
    }
}

Другой способ сделать это - использовать bind.

    request.onload=function() {
        this.daten=request.response;
        alert(this.daten[1].Name); // this works
    }       
    request.onload = request.onload.bind(this);

И не забудьте прочитать документ, чтобы понять, как он работает под капотом: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

EGNdev · Answer 2 · 2018-07-16T06-46-00.000Z

Возможно, вам стоит попытаться заменить

request.onload=function() {
    this.daten=request.response;
    alert(this.daten[1].Name); // this works
}

функцией стрелки

request.onload=()=> {
    this.daten=request.response;
    alert(this.daten[1].Name); // this works
}

Francesco · Answer 3 · 2018-07-16T06-14-00.000Z

Просто попробуйте со ссылкой на это в функции обратного вызова:

 class MakePage {
     constructor() {
        var request=new XMLHttpRequest();
        request.open('GET','daten.json');
        request.responseType='json';
        request.send();
        self=this;
        request.onload=function() {
            self.daten=request.response;
            alert(self.daten[1].Name); // this works
        }       
    }
    test(name) {
        document.getElementById(name).innerHTML=this.daten[1].Name;
    }
 }

Xceno · Answer 4 · 2018-07-16T05-59-00.000Z

this внутри request.onload=function() относится к неправильной области.

Используйте функцию стрелки, например request.onload =() => {} (рекомендуется), или сохраните ссылку на внешнюю область, выполнив const self = this где-нибудь в конструкторе.