How to create associative arrays in javascript, json, how to manipulate?

Question

How to create associative arrays in javascript, json, how to manipulate?

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

It's the first time I'm dealing with this situation, so I do not know exactly how to get around it. The fact is this, I have a form with several inputs, divided by sections:

IntheExperienceTab,IfillinsomeinputswiththedataandwhenIclickaddIcreateblockswiththefilleddataasfollows:

$('#'+destino).append("<div class='blococurso box-experiencia'>"
    +"<label>Empresa:</label> <span class='content' data-content="+experiencia.empresa+">"+experiencia.empresa+"</span><br>"
    +"<label>Cargo:</label> <span class='content' data-content="+experiencia.cargo+">"+experiencia.cargo+"</span><br>"
    +"<label>Admissão:</label> <span class='content' data-content="+experiencia.admissao+">"+addDemissao.admissao.toString().replace(/,/g, '/')+"</span><br>"
    +"<label>Demissão:</label> <span class='content' data-content="+experiencia.demissao+">"+addDemissao.demissao.toString().replace(/,/g, '/')+"</span><br>"
    +"<label>Atividades:</label> <span class='content' data-content="+experiencia.atividades+">"+experiencia.atividades+"</span><br>"
    +"<i class='fa fa-close btn-fechar fechar-experiencia' data-destino='' data-funcao='remover'></i></div>"
  );

When I click the save data button, I get all the inputs and put in obj javascript, and data like these from the experience that are in Divs, I get like this:

$("#painel-experiencia .box-experiencia .content").each(function(index){ experiencia.push( $(this).text() ); });

At this point I have an Array similar to this; . ["dasd", "asdas", "01/01/2017", "01/01/2017", "dasdasd", "asdasd", "asdasd", "01/01/2017", "01/01/2017", "asdasdaasd", "asdasda", "asdasd", "01/01/2017", "01/01/2017", "dsadasdas"]

But what I need is more for this: . [{"empresa": "asdas", "admissao": "01/01/2017", "demissao": "01/01/2017", "atividades":"dasdasd"}, {"empresa": "asdas", "admissao": "01/01/2017", "demissao": "01/01/2017", "atividades":"dasdasd"}]

What I'm looking for is an associative array and a way to add each experience block as an array, inside a wrapper array. What I need is more for json, if that's the only way, how to insert the data into one Json and then wrap it in another json?

If they knew otherwise, it would be very helpful.

javascript jquery ajax json array-associativo

asked by anonymous 15.06.2017 / 06:31

2 answers

1

To show an object with the values of these inputs replaces

experiencia.push($(this).text());

by

experiencia.push({[this.dataset.content]: $(this).text()});

But this notation for assigning keys to objects with [] in creation is very recent and support may be weak, so you could do this:

var dados = $("#painel-experiencia .box-experiencia .content").get().reduce(function(obj, el){
    obj[el.dataset.content] = $(el).text();
    return obj;
}, {});

15.06.2017 / 07:15

Communication with Siemens CLP [closed] Find and remove words from multiple arrays

score 2 · Accepted Answer

I think this might help you.

In your code include an information in the span to use as a key (key date) in the dictionary.

$('#'+destino).append(
    "<div class='blococurso box-experiencia'>"
    +"<label>Empresa:</label> <span class='content' data-chave='empresa' data-content="+experiencia.empresa+">"+experiencia.empresa+"</span><br>"
    +"<label>Cargo:</label> <span class='content' data-chave='cargo' data-content="+experiencia.cargo+">"+experiencia.cargo+"</span><br>"
    +"<label>Admissão:</label> <span class='content' data-chave='admissao' data-content="+experiencia.admissao+">"+addDemissao.admissao.toString().replace(/,/g, '/')+"</span><br>"
    +"<label>Demissão:</label> <span class='content' data-chave='demissao' data-content="+experiencia.demissao+">"+addDemissao.demissao.toString().replace(/,/g, '/')+"</span><br>"
    +"<label>Atividades:</label> <span class='content' data-chave='atividades' data-content="+experiencia.atividades+">"+experiencia.atividades+"</span><br>"
    +"<i class='fa fa-close btn-fechar fechar-experiencia' data-chave='empresa' data-destino='' data-funcao='remover'></i></div>"
);

Rewrite your function that saves it this way:

function salvar(){
    experiencias = Array();
    $(".box-experiencia").each(function(index, obj){
        experiencia = {}
        $(".content", obj).each(function(index1, obj1){
          experiencia[$(obj1).attr('data-chave')] =  $(obj1).text();
        });
        experiencias.push(experiencia);
    });
    console.log(experiencias);
}

The first selector, $ (".box-experience"). each, searches only the divs and iterates each one. The second selector searches each span within the current div and assembles a dictionary with the information. At the end, the dictionary is included in the experiment array.

See the example: link