0

Criei esse exemplo para ilustrar uma tentativa de listagem de JSON buscando separar chave e valor:

var meuArray = {
  "1": "Administra\u00e7\u00e3o",
  "2": "Agronomia",
  "3": "Arquitetura e Urbanismo",
  "4": "Artes C\u00eanicas",
  "5": "Artes Visuais",
  "6": "Biblioteconomia",
  "7": "Biologia",
  "8": "Biomedicina",
  "9": "Biotecnologia",
  "10": "Ci\u00eancia da Computa\u00e7\u00e3o",
  "11": "Ci\u00eancias Ambientais",
  "12": "Ci\u00eancias Biol\u00f3gicas",
  "13": "Ci\u00eancias Cont\u00e1beis",
  "14": "Ci\u00eancias Econ\u00f4micas",
  "15": "Ci\u00eancias Sociais",
  "16": "Comunica\u00e7\u00e3o Social",
  "17": "Dan\u00e7a",
  "18": "Design de Ambientes",
  "19": "Design de Moda",
  "20": "Design Gr\u00e1fico",
  "21": "Dire\u00e7\u00e3o de Arte",
  "22": "Direito",
  "23": "Ecologia e An\u00e1lise Ambiental",
  "24": "Educa\u00e7\u00e3o F\u00edsica",
  "25": "Educa\u00e7\u00e3o Musical",
  "26": "Enfermagem",
  "27": "Engenharia Ambiental",
  "28": "Engenharia Civil",
  "29": "Engenharia de Alimentos",
  "30": "Engenharia de Computa\u00e7\u00e3o",
  "31": "Engenharia de Minas",
  "32": "Engenharia de Produ\u00e7\u00e3o",
  "33": "Engenharia de Software",
  "34": "Engenharia El\u00e9trica",
  "35": "Engenharia Florestal",
  "36": "Engenharia Mec\u00e2nica",
  "37": "Engenharia Qu\u00edmica",
  "38": "Estat\u00edstica",
  "39": "Farm\u00e1cia",
  "40": "Filosofia",
  "41": "F\u00edsica",
  "42": "Fisioterapia",
  "43": "Geografia",
  "44": "Gest\u00e3o da Informa\u00e7\u00e3o",
  "45": "Hist\u00f3ria",
  "46": "Jormalismo",
  "47": "Letras",
  "48": "Matem\u00e1tica",
  "49": "Matem\u00e1tica Industrial",
  "50": "Medicina",
  "51": "Medicina Veterinaria",
  "52": "Museologia",
  "53": "M\u00fasica",
  "54": "Musicoterapia",
  "72": "newCi\u00eancia",
  "55": "Nutri\u00e7\u00e3o",
  "56": "Odontologia",
  "57": "Pedagogia",
  "58": "Psicologia",
  "59": "Publicidade e Propaganda",
  "60": "Qu\u00edmica",
  "61": "Rela\u00e7\u00f5es P\u00fablicas",
  "62": "Servi\u00e7o Social",
  "63": "Sistemas de Informa\u00e7\u00e3o",
  "64": "Zootecnia"
};

function print(meuArray) {
  var tamPerson = Object.keys(meuArray).length;
  // alert(tamPerson);
  for (var i = 0; i < tamPerson; i++) {
    $("#parag").append((Object.keys(meuArray)[i]) + "  " + meuArray[i] + "<br />");
  };
};

print(meuArray);




// $("#parag").append((Object.keys(meuArray)[0]) + "  " + meuArray[0] + "<br />");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p id="parag"></p>

Esqueci de dizer um detalhe importante, aquela lista está em ordem alfabética (no valor) por isso preciso das 'chaves' e respectivos 'valores' aparecendo naquela mesma ordem do 'array associativo' original.

Você pode notar que nos exemplos do Gabriel e Samir o 72 newCiência ficou no final da lista (fora da ordem original) quando na verdade ele está no 'array associativo' entre as chaves 54 e 55, e seria lá que ele deveria ser listado porque essa lista vai para um select e precisa estar em ordem alfabética.

Como imprimir a lista na mesma ordem do 'array associativo' com suas respectivas chaves e valores, somebody save me?

Exemplo disponivel também no jsfiddle

2
  • 1
    Quanto à ordenação, nessa pergunta do SO em inglês o pessoal fala que a especificação do javascript não garante a ordenação das propriedades do objeto da mesma forma em que foi inserida, ou seja... um objeto contém um conjunto não ordenado de propriedades. Sendo assim, vejo as seguintes soluções: - renumerar as chaves de forma a ordenar esse elemento 72 na sua ordem correta; ou - alterar a estrutura do objeto, como o @user31050 sugeriu abaixo, para poder criar sua ordem arbitrária dos elementos. Commented 26/01/2016 às 21:34
  • Essa resposta do @BrunoRB a uma pergunta parecida explica bem a questão da ordenação das propriedades do objeto. Commented 26/01/2016 às 21:42

3 Respostas 3

2

Você pode fazer simplesmente assim:

function print(meuArray) {
  for (item in meuArray){
    $("#parag").append(item + "  " + meuArray[item] + "<br />");
  };
};

Você não possui um array e sim um objeto. Assim, você pode usar um oparador in em um for. Esse loop percorrerá todo seu objeto. O item é a chave atual, caso chame apenas item irá recebar o nome da chave, como no seu exemplo "1", "2"..., já se usar myArray[item], receberá o valor correspondente.

var meuArray = {
  "1": "Administra\u00e7\u00e3o",
  "2": "Agronomia",
  "3": "Arquitetura e Urbanismo",
  "4": "Artes C\u00eanicas",
  "5": "Artes Visuais",
  "6": "Biblioteconomia",
  "7": "Biologia",
  "8": "Biomedicina",
  "9": "Biotecnologia",
  "10": "Ci\u00eancia da Computa\u00e7\u00e3o",
  "11": "Ci\u00eancias Ambientais",
  "12": "Ci\u00eancias Biol\u00f3gicas",
  "13": "Ci\u00eancias Cont\u00e1beis",
  "14": "Ci\u00eancias Econ\u00f4micas",
  "15": "Ci\u00eancias Sociais",
  "16": "Comunica\u00e7\u00e3o Social",
  "17": "Dan\u00e7a",
  "18": "Design de Ambientes",
  "19": "Design de Moda",
  "20": "Design Gr\u00e1fico",
  "21": "Dire\u00e7\u00e3o de Arte",
  "22": "Direito",
  "23": "Ecologia e An\u00e1lise Ambiental",
  "24": "Educa\u00e7\u00e3o F\u00edsica",
  "25": "Educa\u00e7\u00e3o Musical",
  "26": "Enfermagem",
  "27": "Engenharia Ambiental",
  "28": "Engenharia Civil",
  "29": "Engenharia de Alimentos",
  "30": "Engenharia de Computa\u00e7\u00e3o",
  "31": "Engenharia de Minas",
  "32": "Engenharia de Produ\u00e7\u00e3o",
  "33": "Engenharia de Software",
  "34": "Engenharia El\u00e9trica",
  "35": "Engenharia Florestal",
  "36": "Engenharia Mec\u00e2nica",
  "37": "Engenharia Qu\u00edmica",
  "38": "Estat\u00edstica",
  "39": "Farm\u00e1cia",
  "40": "Filosofia",
  "41": "F\u00edsica",
  "42": "Fisioterapia",
  "43": "Geografia",
  "44": "Gest\u00e3o da Informa\u00e7\u00e3o",
  "45": "Hist\u00f3ria",
  "46": "Jormalismo",
  "47": "Letras",
  "48": "Matem\u00e1tica",
  "49": "Matem\u00e1tica Industrial",
  "50": "Medicina",
  "51": "Medicina Veterinaria",
  "52": "Museologia",
  "53": "M\u00fasica",
  "54": "Musicoterapia",
  "72": "newCi\u00eancia",
  "55": "Nutri\u00e7\u00e3o",
  "56": "Odontologia",
  "57": "Pedagogia",
  "58": "Psicologia",
  "59": "Publicidade e Propaganda",
  "60": "Qu\u00edmica",
  "61": "Rela\u00e7\u00f5es P\u00fablicas",
  "62": "Servi\u00e7o Social",
  "63": "Sistemas de Informa\u00e7\u00e3o",
  "64": "Zootecnia"
};

function print(meuArray) {
  for (item in meuArray){
    $("#parag").append(item + "  " + meuArray[item] + "<br />");
  };
};

print(meuArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="parag"></p>

1
2

A solução para ficar na mesma ordem foi alterar o jSON ficando assim:

[
{"id":"1","ciencia":"Administra\u00e7\u00e3o"},
{"id":"2","ciencia":"Agronomia"},
{"id":"3","ciencia":"Arquitetura e Urbanismo"},
{"id":"4","ciencia":"Artes C\u00eanicas"},
{"id":"5","ciencia":"Artes Visuais"},
{"id":"6","ciencia":"Biblioteconomia"},
{"id":"7","ciencia":"Biologia"},
{"id":"8","ciencia":"Biomedicina"},
{"id":"9","ciencia":"Biotecnologia"},
{"id":"10","ciencia":"Ci\u00eancia da Computa\u00e7\u00e3o"},
{"id":"11","ciencia":"Ci\u00eancias Ambientais"},
{"id":"12","ciencia":"Ci\u00eancias Biol\u00f3gicas"},
{"id":"13","ciencia":"Ci\u00eancias Cont\u00e1beis"},
{"id":"14","ciencia":"Ci\u00eancias Econ\u00f4micas"},
{"id":"15","ciencia":"Ci\u00eancias Sociais"},
{"id":"16","ciencia":"Comunica\u00e7\u00e3o Social"},
{"id":"17","ciencia":"Dan\u00e7a"},
{"id":"18","ciencia":"Design de Ambientes"},
{"id":"19","ciencia":"Design de Moda"},
{"id":"20","ciencia":"Design Gr\u00e1fico"},
{"id":"21","ciencia":"Dire\u00e7\u00e3o de Arte"},
{"id":"22","ciencia":"Direito"},
{"id":"23","ciencia":"Ecologia e An\u00e1lise Ambiental"},
{"id":"24","ciencia":"Educa\u00e7\u00e3o F\u00edsica"},
{"id":"25","ciencia":"Educa\u00e7\u00e3o Musical"},
{"id":"26","ciencia":"Enfermagem"},
{"id":"27","ciencia":"Engenharia Ambiental"},
{"id":"28","ciencia":"Engenharia Civil"},
{"id":"29","ciencia":"Engenharia de Alimentos"},
{"id":"30","ciencia":"Engenharia de Computa\u00e7\u00e3o"},
{"id":"31","ciencia":"Engenharia de Minas"},
{"id":"32","ciencia":"Engenharia de Produ\u00e7\u00e3o"},
{"id":"33","ciencia":"Engenharia de Software"},
{"id":"34","ciencia":"Engenharia El\u00e9trica"},
{"id":"35","ciencia":"Engenharia Florestal"},
{"id":"36","ciencia":"Engenharia Mec\u00e2nica"},
{"id":"37","ciencia":"Engenharia Qu\u00edmica"},
{"id":"38","ciencia":"Estat\u00edstica"},
{"id":"39","ciencia":"Farm\u00e1cia"},
{"id":"40","ciencia":"Filosofia"},
{"id":"41","ciencia":"F\u00edsica"},
{"id":"42","ciencia":"Fisioterapia"},
{"id":"43","ciencia":"Geografia"},
{"id":"44","ciencia":"Gest\u00e3o da Informa\u00e7\u00e3o"},
{"id":"45","ciencia":"Hist\u00f3ria"},
{"id":"46","ciencia":"Jormalismo"},
{"id":"47","ciencia":"Letras"},
{"id":"48","ciencia":"Matem\u00e1tica"},
{"id":"49","ciencia":"Matem\u00e1tica Industrial"},
{"id":"50","ciencia":"Medicina"},
{"id":"51","ciencia":"Medicina Veterinaria"},
{"id":"52","ciencia":"Museologia"},
{"id":"53","ciencia":"M\u00fasica"},
{"id":"54","ciencia":"Musicoterapia"},
{"id":"73","ciencia":"newCi\u00eancia"},
{"id":"55","ciencia":"Nutri\u00e7\u00e3o"},
{"id":"56","ciencia":"Odontologia"},
{"id":"57","ciencia":"Pedagogia"},
{"id":"58","ciencia":"Psicologia"},
{"id":"59","ciencia":"Publicidade e Propaganda"},
{"id":"60","ciencia":"Qu\u00edmica"},
{"id":"61","ciencia":"Rela\u00e7\u00f5es P\u00fablicas"},
{"id":"62","ciencia":"Servi\u00e7o Social"},
{"id":"63","ciencia":"Sistemas de Informa\u00e7\u00e3o"},
{"id":"64","ciencia":"Zootecnia"}];

E para acessar:

$.each(meuArray, function()
{
    console.log(this.id);
    console.log(this.ciencia);
});
1

Você não esta pegando o indice do array pela chave dele e sim pelo iterador do for, que conta o tamanho do array, assim se você tiver um indice que não siga a sequencia não irá retornar ordenado.

Exemplo com um $.each do jQuery:

 $.each(meuArray, function(key,val){
  $("#parag").append(key +' - ' + val + '<br>');
 });

Veja funcionando no jsfiddle

Dica de desempenho, ao inves de chamar o append a cada iteracao utilize apenas no final quando tiver todo o conteúdo a ser inserido:

 var str = '';
 $.each(meuArray, function(key,val){
  str += key +' - ' + val + '<br>'; 
 });

$("#parag").append(str);
2
  • Apenas edite sua pergunta colocando este detalhe, a ordenação será feita por ordem alfabetica e não pelos indices. Commented 26/01/2016 às 2:30
  • 1
    @user31050 por que todos seguem uma ordem de contagem e apenas um não segue ? pula do 64 para o 72, se voce conseguir mudar o indice dele para 65 irá ficar correto pela ordem alfabetica visto que eles já estão ordenados, veja este exemplo: jsfiddle.net/gpwpqmko/2 Commented 26/01/2016 às 2:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .