How to list jSON separating key and value correctly

0

I've created this example to illustrate an attempt to list JSON searching for separate key and value:

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><pid="parag"></p>

I forgot to say an important detail, that list is in alphabetical order (in value) so I need the 'keys' and their 'values' appearing in that same order of the original 'associative array'.

You may notice that in the Gabriel and Samir examples the newCiencia 72 was at the bottom of the list (out of the original order) when in fact it is in the 'associative array' between keys 54 and 55, and that's where it should be listed because this list goes to a select and needs to be in alphabetical order.

How to print the list in the same order as the 'associative array' with their respective keys and values, somebody save me?

Example available also on jsfiddle

    
asked by anonymous 26.01.2016 / 02:47

3 answers

2

You can simply do this:

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

You do not have an array but an object . So you can use a in opamp in for . This loop will traverse your entire object. The item is the current key, if you only call item you will receive the key name, as in your example "1", "2" ..., if you already use myArray[item] , you will receive the corresponding value. / p>

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><pid="parag"></p>
    
26.01.2016 / 02:54
2

The solution to stay in the same order was to change the jSON to look like this:

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

And to access:

$.each(meuArray, function()
{
    console.log(this.id);
    console.log(this.ciencia);
});
    
26.01.2016 / 19:31
1

You are not getting the index of the array by its key but by the iterator of for, which counts the size of the array, so if you have an index that does not follow the sequence will not return ordered.

Example with a $ .each from jQuery:

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

See working at jsfiddle

Performance hint, instead of calling append at each iteration use only at the end when you have all the content to be inserted:

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

$("#parag").append(str);
    
26.01.2016 / 03:02