Почему в объекте есть json, а обратиться к нему нельзя?

Question

[Ankozar]

class Json {
    constructor(filename){
        this.filename = filename,
        this.json
    }
    getJson = () =>{
        let xhr = new XMLHttpRequest()
            xhr.open('GET', this.filename + '.json')
            xhr.responseType = 'json'
            xhr.send()
            xhr.onload = ()=>{
                if(xhr.status == 200){
                    this.json = xhr.response
                    }else{
                    console.log(xhr.status)
                }
            }
    }
   
}

const tagsObj = new Json('tags')
tagsObj.getJson()
console.log(tagsObj) //выводит  объект со свойством json
console.log(tagsObj.json) //говорит что свойство json undefined

Вот, что выводит:


Почему так?

Answer 1

[Lynn «Кофеман»]

Потому что его там ещё нет в момент обращения.
Наведи мышку на синюю букву i на скриншоте.

Читать про асинхронность до просветления.

UPD: самый линкуемый вопрос на ruSO https://ru.stackoverflow.com/a/554337/190728

Comments

[Ankozar]

Ага, спасибо

[Сергей]

Хм, а я так и не понял.
"его там ещё нет в момент обращения." - это понятно.
"Читать про асинхронность до просветления." - на это нет времени, иначе такие вопросы не задавались бы.
Так как же использовать данные AJAX, если их ЕЩЁ НЕТ?
Тем паче, что их часто нужно использовать много раз.
Мне бы просто сохранить их в переменной и потом трава не расти. Но как этого достичь?

[Lynn «Кофеман»]

Сергей,
https://ru.stackoverflow.com/a/554337/190728

[Сергей]

Lynn «Кофеман», мои мысли при виде кода:

(async function() {
  var data = await fetch('https://jsonplaceholder.typicode.com/users');
  console.log(await data.json());
})();

Хм, а почему функция забрана в скобки? Никогда такого не видел.
Ладно, проехали.

Ага, вижу await. Наверное, это он заставляет функцию "подождать".

А что такое fetch? Метод загрузки? Странно, я слышал про load, get, post, getjquery, но не про fetch. Или это что-то вроде ПХП-fetch_object?
Ладно, проехали.

'https://jsonplaceholder.typicode.com/users' - странный адрес. Там ПХП? index.html? А-а, понял, это JSON. Я его вытаскиваю из php, мне, что, сюда $.getJSON пихать?
Ладно, проехали.

Ещё один await в выводе на консоль! Странно, зачем он тут?
Ладно, проехали.

[Lynn «Кофеман»]

Сергей, мои мысли пои виде таких вопросов — вам бы учебник почитать. Начните с learn.javascript.ru, например

[Сергей]

Lynn «Кофеман», В общем, вы правы :-) Вот только клиент хочет калькулятор, а я вообще не веб-программист, я делал CSS3-анимации и работал в хтмл-канвасе.
Мне бы только дорваться до переменной, в которой лежат json-данные, а дальше я сам.

$(function(){

var ajax_data=$.getJSON('file.php',function(data){
	arr = Object.keys(data).map(
		(key) => [key, data[key]]
		);
	});

$.when(ajax_data).done(function(){
	alert("Ура, вот данные из mySQL! "+arr[2])
	//стоп. Получается, ВЕСЬ дальнейший код мне надо писать внутри $.when??? Какой ужас!
});

alert("этот алерт никогда не дождется данных. Печалька. "+arr[2]);

});

[Rerurk]

Манать капать, вы пока писали все это, уже бы освоили