1

Necesito mostrar este JSON en un innerHTML, pero con la condición de que los valores repetidos como la id o el nombre no aparezcan y solo salgan los únicos. He estado probando, pero no encuentro una manera de hacerlo. He probado este código, pero no funciona.

function noRepetir (){
var listArray ='[{"id":"a","nom":"joan"},{"id":"b","nom":"david"},{"id":"a","nom":"joan"},{"id":"c","nom":"pep"},{"id":"b","nom":"david"}]'
var uniquesArray =[];
var count = 0;
var found = false;
var text = document.getElementById("exercici5");
var obj= JSON.parse(listArray);

for(i=0;i<listArray.length;i++){
    for(y=0;y<uniquesArray.length;y++){
        if(obj[i].id == uniquesArray[y]){
            found=true;
        }
    }
    count++;
    if(count==1 && found==false){
        uniquesArray.push(obj[i].id);
    }
    count=0;
    found = false;
}

for(i=0;i<listArray.length;i++){
    text.innerHTML+="<br>"+obj[i].id;
}

}

1
  • En PHP tienes el método array_unique para obtener los elementos no repetidos de un array. Podrías buscar si hay algún equivalente en JavaScript y usarlo al principio, generar ese array único y luego recorrerlo directamente
    – Jakala
    Commented el 9 may. 2020 a las 16:48

2 respuestas 2

1

Puedes hacer algo como lo siguiente.

Lo que hago es guardar en un objeto los valores que quieres que no se repitan y en cada iteración del loop comprobar que el id y name no existan en itemsRepeated. Si esta condición es cierta se añade el item al array unique y se añaden los valores de id y name en el objeto itemsRepeated para que no vuelva a repetirse. Sino, no se hace nada.

var listArray = '[{"id":"a","nom":"joan"},{"id":"b","nom":"david"},{"id":"a","nom":"joan"},{"id":"c","nom":"pep"},{"id":"b","nom":"david"}]'

const data = JSON.parse(listArray);

const itemsRepeated = {};
const unique = [];

for (let i = 0; i < data.length; i++) {
  const item = data[i];
  if (!itemsRepeated[item.id] && !itemsRepeated[item.name]) {
    itemsRepeated[item.id] = item.id;
    itemsRepeated[item.name] = item.name;
    unique.push(item);
  }
}

const container = document.getElementById("exercici5");
const html = unique.map(item => `<p>Id: ${item.id}, Nom: ${item.nom}</p>`).join('');

container.innerHTML = html;
<div id="exercici5"></div>

Para mostrarlo en el html puedes iterar todos los elementos únicos y crear el html con los datos. Como map devuelve un array puedes hacer el join de los datos y formar un único string que contenga el html para asignarlo a innerHTML.

2
  • Como podria hacer que me lo pintase con un inner html ? Rollo La id: a es el nombre Joan. En vez de mostrar por console.log. Muchas gracias por cierto
    – Wail
    Commented el 9 may. 2020 a las 16:20
  • he actualizado mi respuesta. Si te sirvió la respuesta aceptala.
    – hawks
    Commented el 9 may. 2020 a las 16:38
0

puedes usar filter, y buscar tu elemento que este en la misma posicion que la que encuentres con findIndex

var listArray = [{
  "id": "a",
  "nom": "joan"
}, {
  "id": "b",
  "nom": "david"
}, {
  "id": "a",
  "nom": "joan"
}, {
  "id": "c",
  "nom": "pep"
}, {
  "id": "b",
  "nom": "david"
}];


var datos = listArray.filter((data, index, j) => 
  index === j.findIndex((t) => (t.id === data.id && t.nom === data.nom))
)

console.log(datos);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.