Dúvida no Ex. 5 da Aula 5 - Requisições Ajax

Sergio, vamos lá.

Pergunta 1:

Sempre que você faz uma requisição AJAX o servidor irá retornar um dado (no caso um JSONP) é no parâmetro retorno que "pegamos" esse dado, pois a função que estamos passando é o callback de sucesso da requisição AJAX:

$.get('http://mirrorfashion.caelum.com.br/treinamentos', function(retorno) {
    console.log(retorno);
    // Implementação vem aqui;
}, 'JSONP');

No caso desta requisição teremos no console:

Object {treinamentos: Array[3]}

Veja que o retorno é um Object com a propriedade treinamentos que contém um Array com 3 elementos.

Pergunta 2:

Você está fazendo uma requisição para o servidor da Caelum, através do método GET com a URL http://mirrorfashion.caelum.com.br/treinamentos. O servidor está preparado para devolver um retorno para quem fizer esse tipo de requisição.

Aqui para entender o porque não chegou o objeto correto preciso que você me mande o código que implementou.

Fica a dica de assistir o curso de HTTP aqui da Alura, para entender melhor a questão.

Pergunta 3

Se você analisar o retorno retorno do console na primeira questão verá que o servidor retorna um objeto com a propriedade treinamentos por isso pegamos ele.

Agora o each

Como a propriedade treinamentos é um Array podemos usar o método each do jQuery que nos permite acessar cada (each) elemento do Array. Imagine como se ele fosse um for percorrendo cara propriedade do Array, só que de forma funcional.

Vai aqui um exemplo pra você testar no console do navegador.

var meuArray = [
    {nome: 'a'},
    {nome: 'b'},
    {nome: 'c'}
];

$.each(meuArray, function() {
  console.log('A propriedade atual do Array é:', this.nome);
});

Neste casso o this é a propriedade atual do Array, assim conseguimos acessar a propriedade nome.

Caso algo não tenha ficado claro, ou eu expliquei de uma forma confusa, pode mandar as novas dúvidas que tento explicar novamente de outra forma.

Hmmm melhorou bastante.

No caso da pergunta 2, deu tudo certo, quando digo acessar, é digitar a URL no Browser mesmo e acessar a página.

No caso da pergunta 3, então a propriedade treinamentos foi preparada no servidor certo, poderia ser outro nome ?

Pergunta 2:

Quando você acessa a URL o navegador faz uma requisição via o verbo GET do HTTP. No caso o serviço espera um parâmetro via query string que é no seguinte formato ?nome=valor e o serviço que foi criado no backend espera um parâmetro com o nome = callback e um valor. Experimente a seguinte URL e veja o retorno:

http://mirrorfashion.caelum.com.br/treinamentos?callback= nomeDaSuaFuncao

Agora no caso do código do exercício o callback é passado pelo método $.ajax que é o success, ou seja, é no callback success que você irá "pegar" os dados retornados pelo serviço.

E veja que no exemplo que eu te mandei o callback é uma função anônima:

...
function(retorno) {
    console.log(retorno);
    // Implementação vem aqui;
}
...

Pergunta 3:

Exatamente, a propriedade treinamentos foi preparada no backend. Caso você tivesse acesso ao código poderia trocar ela para o nome que quisesse. Mas no caso, estamos querendo pegar os treinamentos assim esse nome faz sentido.

--

Vale lembrar que nem sempre temos acesso ao código do backend, normalmente é disponibilizado uma API. E trabalhamos em cima dessa API. Por exemplo a API do SoundCloud.

Fabrício,

Excelente resposta, eu estava tentando entender alguns pontos que não são explicados no exercício.

$.each(retorno.treinamentos ......

e também

        $('<li>').css({
                    "color":"blue",
                    "background-color":"lightgrey"}).text(treinamento.nome).appendTo('#lista');
                    });

A parte "treinamento.nome", confesso que fiquei um tempo pensando o porque do ".nome" e de onde e como esse estava sendo definido.

Fica uma sugestão de melhoria, obrigado pela ajuda.

abçs

Valeu pelo elogio Flávio.

Essas questões são muito comuns, eu sempre me confundia com isso. Com o tempo as coisas começam a ficar mais claras e fazerem mais sentido.