How to list json by separating key and value correctly

Asked

Viewed 2,476 times

0

I created this example to illustrate an attempted listing of JSON seeking to 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>
<p id="parag"></p>

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

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

To print the list in the same order as the associative array with its respective keys and values, Somebody save me?

Example also available on jsfiddle

javascript jquery json
  • 1

    As for the ordination, in this OS question in English People say that the javascript specification does not guarantee the ordering of the properties of the object in the same way it was inserted, that is... an object contains an unordered set of properties. So I see the following solutions: - renumber the keys in order to sort this element 72 in its correct order; or - change the object structure, as @user31050 suggested below, in order to create its arbitrary element order.

  • That @Brunorb answer to a similar question explains well the question of ordering the properties of the object.

3 answers

2

The solution to stay in the same order was to change the json so:

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

2

You can just do it like this:

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

You don’t own a array and yes a object. So you can use an oparador in in a for. This loop will run throughout your object. The item is the current key if just call item will receive the key name, as in your example "1", "2"..., already used myArray[item], will receive the corresponding amount.

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

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

Example with a jQuery $.each:

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

See working on jsfiddle

Performance tip, instead of calling the append to 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);

  • Just edit your question by placing this detail, the ordering will be done in alphabetical order and not by indices.

  • 1

    @user31050 why all follow a count order and only one does not follow ? jumps from 64 to 72, if you can change his Dice to 65 it will be correct in alphabetical order since they are already sorted, see this example: https://jsfiddle.net/gpwpqmko/2/

Browser other questions tagged javascript jquery json

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