0

Estou a usar um script que ordena um JSON em ordem alfabética com header indicativo, como é mostrado nessa pergunta entretanto não estou a conseguir faze-lo funcionar em harmonia com prototype, me retorna o error:

Cannot read property '0' of undefined

não tenho idéia de como resolver pois de fato o script nem é meu, então estou perdido, queria resolve-lo. Eis aqui o script:

var itens = JSON.parse('[{"user_id":"3333","username":"cacau"},{"user_id":"3333","username":"balmer"}]');

itens.sort(function(a,b){ 
    return a.username.localeCompare(b.username);
});

var letras = {};

for(var i in itens) {
    console.log(itens);
    var l = itens[i].username[0].toUpperCase();
    letras[l] = letras[l] || [];
    letras[l].push(itens[i]);
}

for(var letra in letras) {
  document.write('LETRA ' + letra + "<br />");

  for(var k in letras[letra]) {
    document.write(letras[letra][k].username + "<br />");
  }

  document.write('<br />');
}

Um fiddle reproduzindo o erro https://jsfiddle.net/5h708bxj/1/

Obs: A lib prototype.js está sendo usada juntamente com este código.

2

2 Respostas 2

7

O bug ocorre pois você está usando a lib prototype.js, a qual extende o objeto array nativo de javascript incluindo inúmeros métodos novos nele, como você itera sobre o array "itens" com a notação for..in além de passar pelos dois elementos parseados do seu JSON ela vai também incluir todos os métodos contidos na cadeia de prototipação do seu objeto array.

Para solucionar você tem duas alternativas, uma sendo usar o método hasOwnProperty para checar se o item sobre o qual você está iterando realmente pertence a "itens" e não ao prototype de "itens", algo similar a isso:

for(var i in itens) { // itera sobre os dois elementos do array itens + uma porrada de métodos do prototype de "array"
     if (itens.hasOwnProperty(i)) {
        var l = itens[i].username[0].toUpperCase();
        ...

essa solução acima é tosca visto que você vai fazer várias iterações extras atoa, além de ter um if. O que eu recomendo é usar um for tradicional ou um forEach já que ambos iteram estritamente sobre os elementos do array, ignorando os métodos do prototype que são a causa do problema. Exemplo:

for (var i=0; i<itens.length; i++) { // itera apenas sobre os elementos do array
    var l = itens[i].username[0].toUpperCase();

Note que no seu terceiro for, ofor(var k in letras[letra]), você tem o mesmo problema. Aqui vai um fiddle com seu código funcionando https://jsfiddle.net/5h708bxj/2/, contudo tenha certeza de ter entendido qual foi o problema e porque ele foi resolvido, caso contrário você vai acabar caindo nele novamente.

Obs: uma boa prática é usar for..in apenas para objetos, itere sobre arrays sempre com fors "tradicionais" ou forEach's, além de muito mais rápidos eles vão te evitar este tipo de problema.

1
  • Muito obrigado pela explicação e ajuda!! 19/01/2016 às 2:25
2

Uma solução alternativa:

Como itens é um array de objetos usei um forEach, e capturei o índice. Fiz o mesmo no letras[letra], já que k era uma tentativa de captura também do índice:

var itens = JSON.parse('[{"user_id":"3333","username":"cacau"},{"user_id":"3333","username":"balmer"},{"user_id":"3333","username":"zebra"}]');

itens.sort(function(a,b){ 
    return a.username.localeCompare(b.username);
});

var letras = {};

itens.forEach(function(el, i){
    console.log(itens);
    var l = itens[i].username[0].toUpperCase();
    letras[l] = letras[l] || [];
    letras[l].push(itens[i]); // usa o índice para selecionar um objeto de "itens"..
})

for(var letra in letras) {
  document.write('LETRA ' + letra + "<br />");
  letras[letra].forEach(function(el, i){
    document.write(letras[letra][i].username + "<br />"); // Usa o "i" (índice) ao invés do "k" (elemento)
  }) 
  document.write('<br />');
}
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>

Veja que adicionei o prototype.js.

O operado in é usado para objetos em geral, como já foi dito pelo BrundoRB. E principalmente, ele não captura o índice e sim o elemento.

Quando você usa:

for(item in itens)

item não é 0, 1, 2, 3... e sim elemento 0, elemento 1...

No seu caso precisava-se do índice, com o forEach você tem as duas opções como argumentos da própria função: function(el, i){...

Obs.: Adicionei o "Zebra" apenas para demonstração.

1
  • Gostei do uso do foreach acho ele mais fácil, obrigado!! 19/01/2016 às 2:25

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 .