Фильтрует вложенные массивы для поиска уникальных коллекций продуктов

#javascript #reactjs #next.js #shopify

#javascript #reactjs #next.js #Shopify

Вопрос:

Я создаю сайт с помощью Next.js и Shopify. Мне нужно создать страницу, на которой будут перечислены все коллекции, соответствующие определенному productType .

Единственный способ, который я смог найти, чтобы получить эти данные из GraphQL API, — это выполнить поиск по всем продуктам, отфильтрованным productType и попытаться найти все уникальные коллекции из этого списка.

Вот пример того, как это выглядит.

Как я могу получить только уникальные коллекции? Я пробовал это, к сожалению, это не работает:

 const collections = [
  ...new Set([
    ...allCollectionsByType.filter(({ node }) => {
      const collection = node.collections.edges;
      return collection[0]?.node;
    }),
  ]),
];
 

Извините, если это простой вопрос, я действительно плохо работаю с вложенными массивами!

Ценю любую помощь 🙏

Комментарии:

1. вы должны воспроизвести: создайте (самостоятельно) небольшой json, представляющий allCollectionsByType, примените свои 5 строк и проверьте результат. Если вы все еще не можете прийти к решению, обновите здесь свой минимальный воспроизводимый пример?

Ответ №1:

Мне удалось заставить его работать. Я понял, что Набор не может работать так, чтобы объекты в нем не были уникальными, поэтому мне пришлось сначала упорядочить их.

Я не думаю, что это лучшая реализация (я перебираю массив несколько раз), но она действительно работает.

Вот мое решение, чтобы заставить это работать:

   const collections = allCollectionsByType.map(({ node }) => {
    const collection = node.collections.edges?.[0]?.node;
    return JSON.stringify(collection);
  });

  const unique = Array.from(new Set(collections))
    .filter((node) => typeof node === 'string')
    .map((node: string) => JSON.parse(node));