If you want, I recommend using a JSON Parser to easily create and modify JSON's like this one:

  

JSON Parser Online

To create a Array in json organized by states use your object as follows:

{
    "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]"
        }
    ]
}

So you would have 3 objects (delegates) in the estado array of your JSON, of which it was just an example, you can have as many objects as you want in a JSON Array.

To print to the div you would do the following:

First: Store the JSON object in a variable to be able to access and also to identify which are represented this way:

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]"
        }
    ]
}

And then you can use a loopback to store the content you want in your <div> , accessing representante like this:

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);
}    

In this way you would have an array of for example 3 states, which would be representante.estado[0] the state of SP , representante.estado[1] the state of SC and representante.estado[2] the state of RJ . You can do an array of states to identify which one is or just use a common loop repetition, but I'll explain as if you were using the array of states:

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

Important:

In this way name the ID of your divs to <div id="divSP"> , <div id="divSC"> , <div id="divRJ"> and automatically the content will go into them when executing the following function:

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.

As you can see, depending on how your code is html and how is your project you can adapt a little the code I proposed above, according to your need, but the concept is this.

You might have to have a property on the rep indicating which state it belongs to, and you should filter your list of rep by state, you can do this on hand with a for and creating a new list already filtered, or using some library (I recommend this jLinq ), and when you find the reps by state you should make another loop by printing them in your div, with the layout you chose.

The list should look like this:

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"
}];