Tens 2 problemas aqui:
#1
: O this
dentro do ajax está a apontar para a instância do jQuery, e não para o teu construtor pois não é uma propriedade dele.
#2
: O ajax é assíncrono, não podes fazer console.log
depois de instanciar a classe, pois isso acontece antes da respostas vir do servidor.
#1:
Dentro de success: function(pergunta, desafio){
o this
aponta para o jQuery, e não para o que está à volta. Assim se quiseres ter o this
a apontar para a tua classe tens 3 alternativas:
- usar a propriedade
context
e passar aí a referência do contexto que queres:
Exemplo:
jQuery.ajax({
url: '../php/consulta.php' + location.search,
type: "GET",
dataType: 'json',
context: this,
success: function(pergunta, desafio){
this.perguntas = pergunta.pergunta;
this.respostas = pergunta.resposta;
this.desafios = desafio.descricao;
}
});
- podes usar um
sósia
/alias
, dando o nome self
ao this fora do success
do jQuery para teres um ponteiro depois (a ideia que o Heber também sugeriu).
Exemplo:
const self = this;
jQuery.ajax({
url: '../php/consulta.php' + location.search,
type: "GET",
dataType: 'json',
success: function(pergunta, desafio){
self.perguntas = pergunta.pergunta;
self.respostas = pergunta.resposta;
self.desafios = desafio.descricao;
}
});
- usar
arrow functions
que não mudam o contexto de execução:
Exemplo:
jQuery.ajax({
url: '../php/consulta.php' + location.search,
type: "GET",
dataType: 'json',
success:(pergunta, desafio) => {
this.perguntas = pergunta.pergunta;
this.respostas = pergunta.resposta;
this.desafios = desafio.descricao;
}
});
#2:
Aqui tens de usar callbacks, promises ou async
/await
Um exemplo com Promisses poderia ser assim:
class pergunta {
constructor(id, title) {
return new Promise((res, rej) => {
jQuery.ajax({
url: '../php/consulta.php' + location.search,
type: "GET",
dataType: 'json',
success: (pergunta, desafio) => {
this.perguntas = pergunta.pergunta;
this.respostas = pergunta.resposta;
this.desafios = desafio.descricao;
}
});
});
}
}
new pergunta().then((perguntas) => {
console.log(perguntas);
});
Demo com promisse:
class pergunta {
constructor(id, title) {
return new Promise((res, rej) => {
jQuery.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
type: "GET",
dataType: 'json',
success: ({
id,
title
}) => {
this.id = id;
this.title = title;
res(this);
}
});
});
}
}
new pergunta().then((perguntas) => {
console.log(perguntas);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>