Se quiser, recomendo utilizar um JSON Parser para facilmente criar e modificar JSON's como este aqui:
> [JSON Parser Online][1]

Para criar um `Array` em [tag: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:

<!-- language: lang-js -->

    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:

<!-- language: lang-js -->

    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 [tag: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.


  [1]: http://json.parser.online.fr/