Take JSON data array and print with jQuery

Asked

Viewed 29,287 times

9

I have a JSON in the following format:

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

Basically, these are the data to be used to print on a div, but there are representatives in several states. So how would I do that with JSON? How to create an array of representatives per state with the above data? And how to print in div?

preview of how it would look printed: preview de como ficaria os dados impressos as you can see, it has more states as well as SP to print

javascript html json

  • Help us help you by giving an example of how the div would look with the already printed data ;)

  • 3

    Note: Exchange sensitive information from your code for abstract information. You never know what the intentions of whoever reads your code are.

  • You have the list by state separately, or you need to extract the information from the address string?

  • there are gentlemen example. @André what did you mean? the list is by state, I just don’t know how I would organize it in json.

  • @Leandroruel I only spoke for taking real information from example. Replace with "FOO LTDA" as you did.

  • edited my reply @Leandroruel.

Show 1 more comment

2 answers

9


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 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(representatives) in the array estado 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 on div would do the following:

First: Store the JSON object in a variable to be able to access and also to identify what they are representative of in 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 loop loop to store whatever content you want in your <div>, accessing representante in this way:

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

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 make an array of states to identify which is which or just use a common repetition loop, but I’ll explain it as if I were using the States array:

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

Important:

This way name your Divs ID to <div id="divSP">,<div id="divSC">,<div id="divRJ"> and automatically the content will go into them when performing 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, there depending on how your code is and how is your project you can adapt a little the code I proposed above, according to your need, but the concept is this.

  • as it would if it were per state?

  • So you have to organize representantes in an array estados containing all relative states, I will edit my reply with the JSON you want.

  • in the case in the "status" array I would have to put the state name, Ex: São paulo, and print in divSP? the same code serves if JSON is an external file?

  • Actually, you just have to fill out the aryUF with all the states you use, in the same order as JSON (very important), and name their div’s as div UF for example divSP, divSC, divRJ - and yes it works if JSON is an external file, it just has to be in order.

  • Why don’t you show your HTML? makes it so easy to explain it to you. - edit your question and put it there

  • 1

    an error occurs here, not missing the "+" to concatenate the variable "aryUF[i]"?

  • Oh man, that’s right, sorry I didn’t even see :p I’m going to set up there - I already set up

  • before the "for" loop the "Len" variable is terminated with the same comma?

  • Yes, because you can declare several variables as var this way, if it were ; I would have to put var at the beginning of every variable I was to declare :)

Show 4 more comments

1

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

The list should be similar to 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"
}];

Browser other questions tagged javascript html json

You are not signed in. Login or sign up in order to post.