9

Tenho um JSON no seguinte formato:

{
    "representantes":
    [
        {
        "nome":     "Foo LTDA",
        "endereco": "Alameda dos Anjos",
        "cep":      "12345-000",
        "telefone": "(11) 1234-1234",
        "site":     "www.foo.com.br",
        "email":    "[email protected]"
        }   
    ]
}

Basicamente, esses são os dados a serem usados para imprimir em uma div, mas existem representantes em diversos estados. Então, como eu faria isso com JSON? Como criar um array de representantes por estado com os dados acima? E como imprimir na div?

preview de como ficaria impresso: preview de como ficaria os dados impressos como podem ver, tem mais estados também, além de SP para imprimir

6
  • Nos ajude a ajudá-lo dando um exemplo de como ficaria a div com os dados já impressos ;) Commented 13/02/2014 às 15:11
  • 3
    Nota: Troque as informações sensíveis de seu código por informações abstratas. Você nunca sabe quais as intenções de quem lê seu código. Commented 13/02/2014 às 15:12
  • Você tem a lista por estado separadamente, ou precisa extrair a informação da string de endereço?
    – bfavaretto
    Commented 13/02/2014 às 15:16
  • ai está cavalheiros o exemplo. @André o que você quis dizer? a lista é por estado, so nao sei como eu organizaria isso em json.
    – Leandro RR
    Commented 13/02/2014 às 15:34
  • @LeandroRuel Só falei por tirar informações reais do exemplo. Substituir por "FOO LTDA" como você fez. Commented 13/02/2014 às 15:50

2 Respostas 2

9

Se quiser, recomendo utilizar um JSON Parser para facilmente criar e modificar JSON's como este aqui:

JSON Parser Online

Para criar um Array em organizado por estados utilize seu objeto da seguinte maneira:

{
    "estado":
    [
        {
             "nome":     "Foo LTDA",
             "endereco": "Endereço de SP",
             "cep":      "12345-000",
             "telefone": "(11) 1234-1234",
             "site":     "www.foo.com.br",
             "email":    "[email protected]"
        },
        {
             "nome":     "Foo LTDA",
             "endereco": "Endereço de SC",
             "cep":      "12345-000",
             "telefone": "(11) 1234-1234",
             "site":     "www.foo.com.br",
             "email":    "[email protected]"
        },
        {
             "nome":     "Foo LTDA",
             "endereco": "Endereço de RJ",
             "cep":      "12345-000",
             "telefone": "(11) 1234-1234",
             "site":     "www.foo.com.br",
             "email":    "[email protected]"
        }
    ]
}

Assim você teria 3 objetos(representantes) no array estado do seu JSON, do qual foi apenas um exemplo, você pode ter quantos objetos quiser em um Array JSON.

Para imprimir na div faria o seguinte:

Primeiro: Armazene o objeto JSON em uma variável para poder acessar e também para identificar do qual são representantes desta maneira:

var representante = {
    "estado":
    [
        {
             "nome":     "Foo LTDA",
             "endereco": "Endereço de SP",
             "cep":      "12345-000",
             "telefone": "(11) 1234-1234",
             "site":     "www.foo.com.br",
             "email":    "[email protected]"
        },
        {
             "nome":     "Foo LTDA",
             "endereco": "Endereço de SC",
             "cep":      "12345-000",
             "telefone": "(11) 1234-1234",
             "site":     "www.foo.com.br",
             "email":    "[email protected]"
        },
        {
             "nome":     "Foo LTDA",
             "endereco": "Endereço de RJ",
             "cep":      "12345-000",
             "telefone": "(11) 1234-1234",
             "site":     "www.foo.com.br",
             "email":    "[email protected]"
        }
    ]
}

E depois você pode utilizar de um laço de repetição para armazenar o conteúdo que quiser em sua <div>, acessando representante desta forma:

var len               = representante.estado.length,
    aryRepresentantes = [];
for (var i=0; i < len; i++){
  var nome     = representante.estado[i].nome;
  var endereco = representante.estado[i].endereco;
  var cep      = representante.estado[i].cep;
  var telefone = representante.estado[i].telefone;
  var site     = representante.estado[i].site;
  var email    = representante.estado[i].email;
  var strHTML  = "<b>"+nome+"<b>"+
                 "<br>End.: "+endereco+
                 "<br>CEP: "+cep+
                 "<br>Fone: "+telefone+
                 "<br>Site: "+site+
                 "<br>E-mail: "+email;
  aryRepresentantes.push(strHTML);
}    

Dessa forma você teria um array de por exemplo 3 estados, que seriam representante.estado[0] o estado de SP, representante.estado[1] o estado de SC e representante.estado[2] o estado de RJ. Você pode fazer um array de estados para identificar qual é qual ou apenas utilizar um laço de repetição comum, porém vou explicar como se estivesse utilizando o array de Estados:

function preencheDados(aryRepresentantes){
    var aryUF = ["SP","SC","RJ"];
    for (var i=0; i < aryUF.length; i++){
      $('#div'+aryUF[i]).html(aryRepresentantes[i]);
    }
}

Importante:

Desta forma nomeie o ID de suas divs para <div id="divSP">,<div id="divSC">,<div id="divRJ"> e automaticamente o conteúdo irá para dentro delas ao executar a seguinte função:

preencheDados(aryRepresentantes); //nota que o aryRepresentantes foi declarado logo acima no meu laço de repetição lembra? você tem que passar ele como parâmetro.

Como você pode ver, aí dependendo de como está seu código e como está seu projeto você pode adaptar um pouco o código que eu propus acima, de acordo com sua necessidade, mas o conceito é este.

9
  • como faria se fosse por estado?
    – Leandro RR
    Commented 13/02/2014 às 15:46
  • Então você tem que organizar representantes em um array estados contendo todos os estados referentes, irei editar minha resposta com o JSON que você quer. Commented 13/02/2014 às 15:50
  • no caso no array "estado" eu teria que colocar o nome do estado, Ex: São paulo, e imprimir na divSP? o mesmo código serve se o JSON for um arquivo externo?
    – Leandro RR
    Commented 13/02/2014 às 16:57
  • Na verdade, você só tem que preencher o aryUF com todos os estados que você usa, na mesma ordem do JSON(muito importante), e nomear suas div's como div UF por exemplo divSP, divSC, divRJ - e sim funciona se o JSON for um arquivo externo, só tem que estar em ordem. Commented 13/02/2014 às 17:20
  • 1
    ocorre um erro aqui, não tá faltando o "+" para concatenar a variável "aryUF[i]"?
    – Leandro RR
    Commented 13/02/2014 às 18:22
1

Você talvez teria que ter uma propriedade no representante indicando a qual estado ele pertence, e deveria filtrar sua lista de representantes por estado, você pode fazer isso na mão com um for e criando uma nova lista já filtrada, ou utilizando alguma biblioteca (eu recomendo essa jLinq), e ao encontrar os representantes por estado você deve fazer outro laço imprimindo-os em sua div, com o layout que você escolheu.

A lista deveria ser semelhante a essa:

var representantes = [{
    "nome" : "Foo LTDA",
    "endereco" : "Alameda dos Anjos",
    "cep" : "12345-000",
    "telefone" : "(11) 1234-1234",
    "site" : "www.foo.com.br",
    "email" : "[email protected]",
    "uf": "SP"
}, {
    "nome" : "Foo LTDA",
    "endereco" : "Alameda dos Anjos",
    "cep" : "12345-000",
    "telefone" : "(11) 1234-1234",
    "site" : "www.foo.com.br",
    "email" : "[email protected]",
    "uf": "SP"
}, {
    "nome" : "Foo LTDA",
    "endereco" : "Alameda dos Anjos",
    "cep" : "12345-000",
    "telefone" : "(11) 1234-1234",
    "site" : "www.foo.com.br",
    "email" : "[email protected]",
    "uf": "SP"
}];

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 .