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 json 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 html 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.