You got two problems here:
#1
: The this
inside ajax is pointing to jQuery instance, not your constructor because it is not a property of it.
#2
: Ajax is asynchronous, you can’t do console.log
after instantiating the class, as this happens before the replies come from the server.
#1:
Within success: function(pergunta, desafio){
the this
aim for jQuery, not what’s around. So if you want to have jQuery this
pointing to your class you have 3 alternatives:
- use the property
context
and pass on the context reference you want:
Example:
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;
}
});
- you can use a
sósia
/alias
, naming self
this out of the success
jQuery to have a pointer after (the idea that Heber also suggested that).
Example:
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;
}
});
- use
arrow functions
that do not change the execution context:
Example:
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:
Here you have to use callbacks, Promises or async
/await
An example with Promisses could be like this:
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 with 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>
I tried to use the Arrow functions and put a function to display, but I do not see anything, from Undefined. I will edit the question, for you see.
– Tiago Silveira
@Tiagosilveira this new version with
exibir
has the same problem. You saw mine demo with Promisses? is the idea of.exibir()
but respecting the asynchronous nature of ajax. Test this idea.– Sergio
I did it with promisse, but even the console log doesn’t work, I made the appropriate changes giving the get to my api, I tested the pure api and the normal query. I’ll change the question with the edited code.
– Tiago Silveira
@Tiagosilveira uses my code and creates a jsFiddle with your code for me to see
– Sergio
As my code is not online I made using another jsonplaceholder and it didn’t work, look at fiddle: https://jsfiddle.net/L0yb12og/3/ Json: https://jsonplaceholder.typicode.com/posts
– Tiago Silveira
@Tiagosilveira had some errors: https://jsfiddle.net/L0yb12og/4/
– Sergio
In this last example the console does not return anything, nor an Alert runs, another doubt, could explain to me how works the promise so I could work better with it.
– Tiago Silveira
@Tiagosilvethe last example works well, test again. You can read more about Tweets here: https://answall.com/a/143062/129
– Sergio
because nothing is shown to me on the console then? :(
– Tiago Silveira
@Tiagosilveira tests thus: https://jsfiddle.net/o3uub8tn/
– Sergio
I tried again and it was not, I tried to run by Jsbin and ran nothing tbm @Sergio♦
– Tiago Silveira
@Tiagosilveira have some firewall where you are? or an old browser?
– Sergio
Let’s go continue this discussion in chat.
– Tiago Silveira
@Tiagosilveif any of the answers solved the problem you can mark as accepted. Otherwise it says what is missing to complete!
– Sergio