Объединить атрибут элемента одного массива с элементами другого массива

Question

У меня есть несколько вопросов относительно того, что будет лучшим подходом для выполнения следующих действий:

1. Вызов двух разных API:

   axios.get(contents);
   axios.get(favorites);
   

2. Ответ будет выглядеть так:

   contents: [
      {
          id: 1,
          value: someValue
      },
      {
          id: 2,
          value: someValue
      }
   ];
   
   favorites: [
       {
           id: 1,
           contentId: 2    
       }
   ];
   

Как лучше всего перебрать каждый элемент избранного и добавить элемент в массив contens, например isFavorite: true, когда contentId соответствует id. Это должно выглядеть следующим образом:

    contents: [
        {
            id: 1,
            value: someValue
        {,
        {
            id: 2,
            value: someValue
            isFavorite: true
        {
    ];

Как лучше всего это сделать, и есть ли синтаксис ES6, который может легко это сделать? В настоящее время у меня есть два отдельных действия, одно, которое получает содержимое, и одно, которое получает избранное, я мог бы объединить их или объединить их в редукторе.

Есть предложения?

Answer 1

Во-первых, вам необходимо получить обещания от вызовов API, а когда оба они будут выполнены, вы можете выполнить объединение результатов.

const contentsApi = () => Promise.resolve([
   {
       id: 1,
       value: 'foo'
   },
   {
       id: 2,
       value: 'bar'
   }
])

const favouritesApi = () => Promise.resolve([
    {
        id: 1,
        contentId: 2    
    }
])

let contents;
let favourites;

const contentsApiCall = contentsApi().then(res => {
    contents = res;
})

const favouritesApiCall = favouritesApi().then(res => {
  favourites = res;
})



Promise.all([contentsApiCall, favouritesApiCall]).then(() => {
    const merged = contents.map(content => {
    if(favourites.some(favourite => favourite.contentId === content.id)){
        return {
        ...content,
        isFavourite: true
      }
    } else {
        return content;
    }
  })
  console.log(merged)
  // do whatever you need to do with your result, either return it if you want to chain promises, or set it in a variable, etc.
})

Answer 2

Вы можете использовать Set, чтобы собрать все contentId значения из favorites и затем выполнить итерацию по вашему массиву contents. Это имеет большую временную сложность, чем использование some для массива, потому что вызов .has() для Set равен O (1) :

let contents = [{
    id: 1,
    value: 'someValue1'
  },
  {
    id: 2,
    value: 'someValue2'
  },
  {
    id: 3,
    value: 'someValue'
  }
];

let favorites = [{
    id: 1,
    contentId: 2
  },
  {
    id: 2,
    contentId: 3
  }
];

let favoriteContents = new Set(favorites.map(f => f.contentId));
contents.forEach(c => {
  if (favoriteContents.has(c.id)) c.isFavorite = true;
});
console.log(contents);

Answer 3

const newContents = contents.map((content) => {
   const foundFavorite = favorites.find((favorite) => favorite.contentId === content.id)
   if (foundFavorite) {
      return {
         ...content,
         isFavorite: true,
      }
   }
   return content
});