Сгруппировать картинки по тегу

Question

Мне приходит массив объектов, к примеру:

0: {type: "gif", id: "BZ9K1QrgcJr20", url: "https://giphy.com/gifs/dog-puppy-BZ9K1QrgcJr20", imageTag: "dog", …}
1: {type: "gif", id: "E5EUmJssOooGk", url: "https://giphy.com/gifs/cat-E5EUmJssOooGk", imageTag:"cat" …}

С помощью groupBy из lodash я их сгруппировал по imageTag, чтобы можно было выводить картинки по введённому тэгу:

{dog: Array(1), cat: Array(1)}

Суть в том, что мне нужно выводить картинки группами, то есть, если тег = "dog", то все картинки с таким тегом выводятся вместе, затем группа картинок с другим тегом и тд. Мне непонятно, как именно реализовать вывод по группам.

Answer 1

Вытащить все теги массива уникально, используйте Set():

let data = [{type: "gif", id: "BZ9K1QrgcJr20", url: "https://giphy.com/gifs/dog-puppy-BZ9K1QrgcJr20", imageTag: "dog",},
{type: "gif", id: "E5EUmJssOooGk", url: "https://giphy.com/gifs/cat-E5EUmJssOooGk", imageTag:"cat"},
{type: "gif", id: "BZ9K1QrgcJr20", url: "https://giphy.com/gifs/dog-puppy-BZ9K1QrgcJr20", imageTag: "dog"},
{type: "gif", id: "E5EUmJssOooGk", url: "https://giphy.com/gifs/cat-E5EUmJssOooGk", imageTag:"cat"}
];

console.log([... new Set(data.map(a=>a.imageTag))]);

Если вам надо сгруппировать объекты массива по тегу, используйте .sort():

let data = [{type: "gif", id: "BZ9K1QrgcJr20", url: "https://giphy.com/gifs/dog-puppy-BZ9K1QrgcJr20", imageTag: "dog",},
{type: "gif", id: "E5EUmJssOooGk", url: "https://giphy.com/gifs/cat-E5EUmJssOooGk", imageTag:"cat"},
{type: "gif", id: "BZ9K1QrgcJr20", url: "https://giphy.com/gifs/dog-puppy-BZ9K1QrgcJr20", imageTag: "dog"},
{type: "gif", id: "E5EUmJssOooGk", url: "https://giphy.com/gifs/cat-E5EUmJssOooGk", imageTag:"cat"}
].sort((a,b)=>a.imageTag>b.imageTag?1:a.imageTag<b.imageTag?-1:0);

console.log(data);

Если вам нужно отфильтровать массив объектов по тегу, используйте .filter():

let data = [{type: "gif", id: "BZ9K1QrgcJr20", url: "https://giphy.com/gifs/dog-puppy-BZ9K1QrgcJr20", imageTag: "dog",},
{type: "gif", id: "E5EUmJssOooGk", url: "https://giphy.com/gifs/cat-E5EUmJssOooGk", imageTag:"cat"},
{type: "gif", id: "BZ9K1QrgcJr20", url: "https://giphy.com/gifs/dog-puppy-BZ9K1QrgcJr20", imageTag: "dog"},
{type: "gif", id: "E5EUmJssOooGk", url: "https://giphy.com/gifs/cat-E5EUmJssOooGk", imageTag:"cat"}
].filter(a=>a.imageTag=='cat');

console.log(data);

Можно использовать и .reduce(), если вы понимаете как он работает:

let data = [{type: "gif", id: "BZ9K1QrgcJr20", url: "https://giphy.com/gifs/dog-puppy-BZ9K1QrgcJr20", imageTag: "dog",},
{type: "gif", id: "E5EUmJssOooGk", url: "https://giphy.com/gifs/cat-E5EUmJssOooGk", imageTag:"cat"},
{type: "gif", id: "BZ9K1QrgcJr20", url: "https://giphy.com/gifs/dog-puppy-BZ9K1QrgcJr20", imageTag: "dog"},
{type: "gif", id: "E5EUmJssOooGk", url: "https://giphy.com/gifs/cat-E5EUmJssOooGk", imageTag:"cat"}
]

console.log(data.reduce((r,v)=>((r[v.imageTag]||(r[v.imageTag]=[])).push(v),r),{}));

Answer 2

Рекомендую воспользоваться Array.reduce

let array = [
  {type: "gif", id: "BZ9K1QrgcJr20", url: "https://giphy.com/gifs/dog-puppy-BZ9K1QrgcJr20", imageTag: "dog"},
  {type: "gif", id: "E5EUmJssOooGk", url: "https://giphy.com/gifs/cat-E5EUmJssOooGk", imageTag:"cat"},
  {type: "gif", id: "BZ9K1QrgcJr201", url: "https://giphy.com/gifs/dog-puppy-BZ9K1QrgcJr201", imageTag: "dog"},
  {type: "gif", id: "E5EUmJssOooGk1", url: "https://giphy.com/gifs/cat-E5EUmJssOooGk1", imageTag:"cat"}
];

let result = array.reduce((acc, item) => {
  if(acc[item.imageTag]) {
    acc[item.imageTag].push(item);
  } else {    
    acc[item.imageTag] = [item];
  }  
 return acc;
}, {});

console.log(result);

Answer 3

let oldArr = {
      0: {type: "gif", id: "BZ9K1QrgcJr20", url: "https://giphy.com/gifs/dog-puppy-BZ9K1QrgcJr20", imageTag: "dog"},
      1: {type: "gif", id: "E5EUmJssOooGk", url: "https://giphy.com/gifs/cat-E5EUmJssOooGk", imageTag: "cat"}
    }, newArr = {};
    
for(let i = 0; i < Object.keys(oldArr).length; i++) {
  if(!newArr[oldArr[i]['imageTag']]) newArr[oldArr[i]['imageTag']] = [];
  newArr[oldArr[i]['imageTag']].push(oldArr[i]);
}

console.info(newArr);

БЛОГ НА HUSL

Сгруппировать картинки по тегу

Ответы (3 шт):