1

Dizem que Json é simples. Mas estou penando e muito.

Seguinte código:

$(document).ready(function(){
    $.get( "http://meusite.com/", function(data) {
         console.log(data);
    });
});

o resultado o console.log é

[
    {"id":"769","cidade":"minhacidade","estado":"PR"},
    {"id":"855","cidade":"Caram","estado":"PR"}
]

Exatamente o que preciso. (até aqui consegui) Mas a partir desse ponto não consigo sair. Preciso manipular esses resultado.Quebrar em pedaços.

Por em DIVs.

Mas não consigo (pesquisei o google todo) nada da certo.

O que eu tenho que fazer para que eu posso por ex:

  • Printar na tela o ID da segunda cidade.

  • O segundo estado

E assim por diante pq esse Json vai crescer e muito.

2
  • Podes dar um exemplo de como o HTML deve ser?
    – Sergio
    30/03/2016 às 19:58
  • Olha, só me ensinando como por um dado desse Json em uma DIV simples. O resto eu faço. Por exemplo o (Id 2) em um DIV. Não preciso de mais nada
    – Uriel
    30/03/2016 às 20:00

5 Respostas 5

9

Cara, já sei o que deve estar rolando. O seu retorno de estar vindo em string, você tem que converter em objeto para poder manipula-lo.

Observe:

var valorRetornado = '[{"id":"769","cidade":"minhacidade","estado":"PR"},{"id":"855","cidade":"Caram","estado":"PR"}]'
        // convertendo a string em objeto
        var obj = JSON.parse(valorRetornado);

        obj.forEach(function(o, index){
            console.log(o.cidade);
        });

Os colaboradores deram vários exemplos, mas em todos eles convertem objeto em string, quando na verdade vc deve fazer o contrário.

1
  • 1
    Verdade, observando mais e aprendendo percebi isso. Por isso mudei a forma de receber. Você esta certo. Obrigado
    – Uriel
    31/03/2016 às 13:42
5

Amigo você tem um objeto em mãos. Para manipular o objeto você usa a sintaxe:

*object[key] ou object.key*

Em seu caso vai ficar:

console.log( data[0]['id'] );

Para inserir esses dados numa DIV ou qualquer elemento, você pode fazer isso de N maneiras. Pode ser pelo seletor CLASS ou pelo seletor ID, tem outras formas formas de fazer, mas a principio são essas. Voce pode ler a documentação do Jquery para maiores detalhes.

https://api.jquery.com/category/selectors/

Bons estudos amigos.

4
  • Já fiz assim tbm o resultado é undefined
    – Uriel
    30/03/2016 às 20:06
  • A ok amigo, coloca um indice antes da chave, exemplo: data[0]['id'], veja o que acontece.
    – Duque
    30/03/2016 às 20:10
  • Você esta certo. Mas mudei o método no lugar de $get usei $getJSON Ai deu certo console.log(data[1]['cidade']);
    – Uriel
    30/03/2016 às 20:20
  • 1
    Beleza, agora retire o -1 e marque como a melhor resposta hehe
    – Duque
    30/03/2016 às 20:21
2

Nesse data estás a receber um JSON. No caso de ele ainda estar em String podes converter em Array. A partir daí é simples. Um exemplo podia ser assim:

data = typeof data == 'string' ? JSON.parse(data) : data; // para garantir que o formato é correto
// e depois:
data.forEach(... etc 

Exemplo:

[{
    "id": "769",
    "cidade": "minhacidade",
    "estado": "PR"
}, {
    "id": "855",
    "cidade": "Caram",
    "estado": "PR"
}].forEach(function(elementoDaArray) {
    var div = document.createElement('div'); // criar o elemento
    div.id = elementoDaArray.id; // dar-lhe o ID do objeto
    div.innerHTML = JSON.stringify(elementoDaArray); // dar-lhe conteúdo
    document.body.appendChild(div); // inserir no DOM
});

Exemplo: https://jsfiddle.net/g3gmzk2p/

Se quiseres usar jQuery para fazer o mesmo pode ser assim:

$('<div/>', {
    id: elementoDaArray.id,
    html: JSON.stringify(elementoDaArray)
}).appendTo(document.body);

Em vez do $.get podias usar o $.getJSON que já te dá um JSON. Para iterar o objeto que recebes podes usar o data.forEach(function(... como fiz em cima, ou um ciclo for.

1
  • Fiz da sua forma e funcionou também. Obrigado
    – Uriel
    30/03/2016 às 20:36
1

Resolvido mudei a forma de chamar, para $.getJSON .

$.getJSON( "http://meusite.com/", function( data ) {
//console.log(data);

console.log(data[0]['cidade']);
console.log(data[1]['cidade']);

});

Esse método me volta um obejto (o outro um texto).

Com isso consegui acessar cada índice. Com console.log(data[1]['cidade']);

Deu certo.

Também com $get deu certo. Então vou deixar as duas maneiras para quem precisar.

$(document).ready(function(){
    $.get( "http://meusite.com/", function( data ) {


data = typeof data == 'string' ? JSON.parse(data) : data;
data.forEach(function(elementoDaArray) {

    var div = document.createElement('div');

    id = elementoDaArray.id;
    cidade = elementoDaArray.cidade;
  
    console.log(cidade);
    console.log(id);


    //div.innerHTML = JSON.stringify(elementoDaArray);
    //document.body.appendChild(div);


});

2
  • So uma dica, seria muito bom você usar success e error, pois se houver um erro nessa chamada, você pode tratar o erro e imprimir algo amigável ao usuário. É só uma dica.
    – Duque
    30/03/2016 às 20:33
  • Sim irei usar. Obrigado
    – Uriel
    30/03/2016 às 20:35
0

$.get é uma versão simplificada do $.ajax, possui menos parâmetros. Para usar o json deve-se usar ajax, já que o mesmo tem o parâmetro datatype, que deve ser definido para json.

neste caso:

$.ajax({
method:"get",
dataType:"json",
url:"seusite",
success: function(data){
console.log(data["id"]);
}

N

este exemplo eu pego o id, para os outros é só usar data[nome].

Abraço

1
  • Tentei assim tbm Mas recebo isso Uncaught SyntaxError: Unexpected end of input
    – Uriel
    30/03/2016 às 20:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .