Para criar um Array
em json organizado por estados utilize seu objeto da seguinte maneira:
{
"representantes""estado":
[
{
"nome": "Foo LTDA",
"endereco": "Alameda"Endereço dosde Anjos"SP",
"cep": "12345-000",
"telefone": "(11) 1234-1234",
"site": "www.foo.com.br",
"email": "[email protected]"
},
{
"nome": "Foo LTDA",
"endereco": "Alameda"Endereço dosde Anjos"SC",
"cep": "12345-000",
"telefone": "(11) 1234-1234",
"site": "www.foo.com.br",
"email": "[email protected]"
},
{
"nome": "Foo LTDA",
"endereco": "Alameda"Endereço dosde Anjos"RJ",
"cep": "12345-000",
"telefone": "(11) 1234-1234",
"site": "www.foo.com.br",
"email": "[email protected]"
}
]
}
Assim você teria 3 objetos(representantes) no array representantesestado
do seu JSON, do qual foi apenas um exemplo, você pode ter quantos objetos quiser em um Array JSON.
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 JSONObjectrepresentante = {
"representantes""estado":
[
{
"nome": "Foo LTDA",
"endereco": "Alameda"Endereço dosde Anjos"SP",
"cep": "12345-000",
"telefone": "(11) 1234-1234",
"site": "www.foo.com.br",
"email": "[email protected]"
},
{
"nome": "Foo LTDA",
"endereco": "Alameda"Endereço dosde Anjos"SC",
"cep": "12345-000",
"telefone": "(11) 1234-1234",
"site": "www.foo.com.br",
"email": "[email protected]"
},
{
"nome": "Foo LTDA",
"endereco": "Alameda"Endereço dosde Anjos"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 JSONObjectrepresentante
desta forma:
var len = JSONObjectrepresentante.representantesestado.length,
aryRepresentantes = [];
for (var i=0; i < len; i++){
var nome = JSONObjectrepresentante.representantes[i]estado[i].nome;
var endereco = JSONObjectrepresentante.representantes[i]estado[i].endereco;
var cep = JSONObjectrepresentante.representantes[i]estado[i].cep;
var telefone = JSONObjectrepresentante.representantes[i]estado[i].telefone;
var site = JSONObjectrepresentante.representantes[i]estado[i].site;
var email = JSONObjectrepresentante.representantes[i]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);
}
$('#div').html(aryRepresentantes[0]); //para o representante 0 e assim em diante
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.