getJSON Ajax for JSON with multiple objects

0

To search for data in a simple JSON , such as:

{
    "chave1":"valor1",
    "chave2":"valor2"
}

I use something like this:

$.getJSON(dados, function(json) {
    $.each(json, function() {
        $('#r').append("<p>"+this.chave1+"</p>");
    });
})

But the case is now a JSON in the format:

{"tab":[{
    "urlimg":"1.jpg",
    "nome":"Jhonatan",
    "sobrenome":"Pereira"},
    {"urlimg":"1.jpg",
    "nome":"Jhonatan",
    "sobrenome":"Pereira"}],
"dados":[{
    "algum":"valor",
    "qualquer":"valor2"}],
"outro":[{
    "numero_versao":"1",
    "nome_versao":"v0.1B"}]
}

This is because PHP returns 3 queries, and I need to pass all results on a single request.

Help?

    
asked by anonymous 16.01.2016 / 07:36

2 answers

1

The way you work will not change, what you should watch out for is the treatment that will be done on every part of the JSON that you return. See:

$.getJSON(dados, function(json) {

  //para cada *value* é necessário indicar o nome da coluna(índice): value.indice
  //pois no json informado, *value* trata-se de um array

  //tratamento da "tab"
  $.each(json.tab, function(key, value) {
     $('#tab').append( "<p> key=" + key + "& value=" + value.urlimg +  "</p>" );
     $('#tab').append( "<p> key=" + key + "& value=" + value.nome +  "</p>" );
     $('#tab').append( "<p> key=" + key + "& value=" + value.sobrenome +  "</p>" );
  });

  //tratamento dos "dados"
  $.each(json.dados, function(key, value) {
     $('#dados').append( "<p> key=" + key + "& value=" + value.algum + "</p>" );
  });

  //tratamento da "outro"
  $.each(json.outro, function(key, value) {
     $('#outro').append( "<p> key=" + key + "& value=" + value.nome_versao + "</p>" );
  });
})

This tells you to know which parameters will be returned. If you are not aware but want it to return all parameters in certain div's it is also possible to do this:

$.getJSON(dados, function(json) {
  //para cara parametro execute o $.each
  $.each(json, function(key, value) {
      //defino em qual sub-array do json estará sendo trabalhado
      var param = json[key];
      //usa o nome do 'param' para definir qual div, EX: #tab => "#"+'tab'
      $.each(param,function(key, value){
        $('#' + key).append( "<p> key=" + key + "& value=" + value + "</p>" );
      });
  });
})

Now I see that you are working with jQuery. I would advise you to find out more about pure Javascript, as well as being more "readable" it also saves codes in certain cases such as $. Each () . NOTE: This does not mean that you can not mix both, like this:

//sabendo quais campos serão enviados
$.getJSON(dados, function(json) {
  //tratamento da "tab"
  for(var key in json.tab){
    $('#tab').append( "<p> key=" + key + "& value=" + json.tab + "</p>" );
  };
  //tratamento dos "dados"
  for(var key in json.dados){
    $('#dados').append( "<p> key=" + key + "& value=" + json.dados + "</p>" );       
  };
  //tratamento da "outro"
  for(var key in json.outro){
    $('#outro').append( "<p> key=" + key + "& value=" + json.outro + "</p>" );
  };
})

//sem saber quais campos mas querendo colocar todos (2º exemplo)
$.getJSON(dados, function(json) {
  //para cara sub-objeto, trate seus parâmetros
  for (var p in json)
      //defino em qual sub-array do json estará sendo trabalhado
      var param = json[p];
      //usa o nome do 'param' para definir qual div, EX: #tab => "#"+'tab'
      for(var key in param)
        $('#' + key).append( "<p> key=" + key + "& value=" + param[key] + "</p>" );
      });
  });
})
    
19.01.2016 / 12:32
1

You can continue to use the same way, only with one more iteration over the returned object.

$(document).ready(function () {
   $.getJSON('dados.json', function (dados) {

       var objKeys = Object.keys(dados);

       for (var key in objKeys) {
           imprimirConsulta(objKeys[key], dados);
       }
   });

   function imprimirConsulta(consulta, dados) {
       if (!dados.hasOwnProperty(consulta)) {
           console.error('Dados não possuem consulta', consulta);
           return;
       }

       var $div = $('<div></div>');
       $div.append('<div>' + consulta.toUpperCase() + '</div>');

       var obj = dados[consulta];

       obj.forEach(function (obje) {
           $.each(obje, function (chave, valor) {
               $div.append('<div>Chave: ' + chave + '    Valor: ' + valor + '</div>');
           });

           $div.append('<div style="margin: 5px;"></div>');
       });

       $('.content').append($div);
       $('.content').append('<div style="border-bottom: 1px solid black;"></div>')
   }
});
    
16.01.2016 / 13:36