Как отфильтровать объекты из массива по id?

Question

[jeka-3]

let data = [
  {
    "id": 1,
    "name": "Жанна Блиц"
  },
  {
    "id": 1,
    "name": "Арина Наумова"
  },
  {
    "id": 2,
    "name": "Виталий Коробко"
  },
  {
    "id": 1,
    "name": "Елена Снежная"
  },
  {
    "id": 3,
    "name": "Юлиана Ветрова"
  },
  {
    "id": 2,
    "name": "Максим Коробович"
  }, 
  {
    "id": 3,
    "name": "Юлия Фран"
  },
]


data.forEach(({ id, name }) => {
  users[`${name}`] = { id, name};
  list.innerHTML += `
    <li class="user-item">${name} | ${id}</li>  `
})

на моём примере все выводит в один список. как отфильтровать так чтобы к примеру один список с id: 1, второй id: 2 и т.д. ?
в результате нужно получить вот такой результат:

<ul id="1">
  <li>Жанна Блиц</li>
  <li>Арина Наумова</li>
  <li>Елена Снежная</li>
</ul>
<ul id="2">
  <li>Виталий Коробко</li>
  <li>Максим Коробович</li>
</ul>
<ul id="3">
  <li>Юлия Фран</li>
</ul>

Comments

[jeka-3]

Bavashi, я хочу достичь вот такой результат

<ul id="1">
  <li>Жанна Блиц</li>
  <li>Арина Наумова</li>
  <li>Елена Снежная</li>
</ul>
<ul id="2">
  <li>Виталий Коробко</li>
  <li>Максим Коробович</li>
</ul>
<ul id="3">
  <li>Юлия Фран</li>
</ul>

Answer 1

[0xD34F]

Группируем данные:

const grouped = Object.entries(arr.reduce((acc, n) => (
  (acc[n.id] ??= []).push(n.name),
  acc
), {}));

Затем собираем html:

document.body.insertAdjacentHTML('beforeend', grouped
  .map(([ k, v ]) => `
    <ul id="list-${k}">${v.map(n => `
      <li>${n}</li>`).join('')}
    </ul>`)
  .join('')
);

Или напрямую создаём элементы:

document.body.append(...grouped.map(([ id, names ]) => {
  const ul = document.createElement('ul');
  ul.id = `list-${id}`;

  ul.append(...names.map(n => {
    const li = document.createElement('li');
    li.textContent = n;
    return li;
  }));

  return ul;
}));

Answer 2

[Stalker_RED]

data.filter(item => item.id == 1)

Comments

[jeka-3]

Stalker_RED, а если id 100 или 1000 ? для каждого вручную прописывать?

Answer 3

[drawnofmymind]

<div id='app'></div>

let data = [
  {
    "id": 1,
    "name": "Жанна Блиц"
  },
  {
    "id": 1,
    "name": "Арина Наумова"
  },
  {
    "id": 2,
    "name": "Виталий Коробко"
  },
  {
    "id": 1,
    "name": "Елена Снежная"
  },
  {
    "id": 3,
    "name": "Юлиана Ветрова"
  },
  {
    "id": 2,
    "name": "Максим Коробович"
  }, 
  {
    "id": 3,
    "name": "Юлия Фран"
  },
]

data.forEach((item)=>{
		
	  document.getElementById('app').innerHTML += `<ul><li>${item.id} | ${item.name}</li></ul>`
})

Comments

[jeka-3]

drawnofmymind нужно не каждый поместить в разный список, а отфильтровать по id:

<ul id="1">
  <li>Жанна Блиц</li>
  <li>Арина Наумова</li>
  <li>Елена Снежная</li>
</ul>
<ul id="2">
  <li>Виталий Коробко</li>
  <li>Максим Коробович</li>
</ul>
<ul id="3">
  <li>Юлия Фран</li>
</ul>