Как отсортировать два массива объектов в React?

Question

[tron21]

Доброго времени суток! Не могу решить одну задачу. Есть два массива объектов. Один это отфильтрованный список фильмов со стороннего апи. Второй это отфильтрованный список с локального апи. Объекты по своему составу слегка отличаются. Объекты из локального апи создавались на основе объектов со стороннего . Необходимо оба массива отсортировать так чтобы в итоговый массив в 1 очередь добавился объект из локального массива объектов. У объектов есть следующие значения , по которым можно их сверить - это nameRU , nameEN , movieId у локальных , которое идентично id у фильмов со стороннего апи . Никак не могу понять как эту задачу решить. Буду благодарен любому совету. Ниже код этой функции из React

//обработчик для поиска фильмов
    function handleSearchFilm(data) {

      const allMovies = JSON.parse(localStorage.getItem('movies'));
      const localMovies = JSON.parse(localStorage.getItem('saved-movies'));
      
      //фильтр по локальным фильмам
      const localSearch = localMovies.filter(item => ((item.nameRU != null && 
      item.nameRU.toLowerCase().includes(data.toLowerCase())) || (item.nameEN != null && 
      item.nameEN.toLowerCase().includes(data.toLowerCase()))))
     
      //фильтр по всем фильмам 
      const allSearch =  allMovies.filter(item => ((item.nameRU != null && 
      item.nameRU.toLowerCase().includes(data.toLowerCase())) || (item.nameEN != null && 
      item.nameEN.toLowerCase().includes(data.toLowerCase()))))

setResultSearchFilm('Сюда необходимо добавить итог');
}

Comments

[Сергей Сергей]

[ ...( new Set( [ ...local, ...remote ] ).values() ]

[tron21]

Сергей Сергей, я правильно понимаю что здесь создается объект Set , в котором будут обьекты из local и remote и будут только уникальные так как в случае совпадений объект из remote не попадет , так как он уже взят из local?

и вся эта конструкция это просто создание нового объекта с использованием Set ? Я просто не до конца понимаю то что Вы предлагаете.

[Сергей Сергей]

Да чепуху я предлагаю, где сначала во множество войдут локальные записи, а потом "сторонние", а совпадающие из "сторонних" просто не будут включены во множество. Но так не сработает, потому что объекты из локального хранилища, полученные из jsonparse, всегда будут уникальны, и фильтрации на совпадения не будет. Чтобы фокус со множеством получился, придётся подумать над получением локального и стороннего списков, элементы которого могут быть сравнены на предмет повторения.

[tron21]

Сергей Сергей, я пытался это все провернуть через forEach, а внутри делать some для сравнения с другим массивом. Проблема в том что мне нужно добавлять именно элемент с уникальным _id от монго и это не получилось таким способом.

[Сергей Сергей]

Не понял, не получалось обработать свойства у объектов: "movieId", "id", и "_id"?

Выходит, что movieId и id есть по сути _id из монго?

new Set( [
  ...localMovies.map( m => m.movieId ),
  ...allMovies.map( m => m.id )
] )

[WbICHA]

Необходимо оба массива отсортировать так чтобы в итоговый массив в 1 очередь добавился объект из локального массива объектов.

Я бы хотел уточнить, тебе на выходе надо получить массив объектов со стороннего ип, в котором все объекты, которые имеются в локальном массиве, были заменены на локальные?
Если да, то:

const all = [{id:0}, {id:1}, {id:2}];
  const local = [{movieId:1}];
  
  const result = all.map((am) => {
    const lm = local.find((m) => m.movieId === am.id)
    return lm ?? am;
  });

[tron21]

Сергей Сергей, нет movieId и id это просто одинаковые числа. По ним можно было бы сравнивать. А _id только у локальных карточек , которые должны отрисовываться в 1 очередь

[tron21]

WbICHA, Спасибо! Да. два массива объектов. Один локальный другой со стороннего апи. В стороннем те , которые совпадают с локальным ( например по nameRU) должны быть заменены на локальный.

а можешь, пожалуйста, уточнить насчет возвращаемого значения return lm ?? am; - как это будет выглядеть при использовании других операторов, в более развернутом виде ? Я просто с оператором ?? еще не сталкивался и , к сожалению, пока не понимаю как именно он работает.

[tron21]

WbICHA, а сам вариант работает. Спасибо большое за помощь! Можно его добавить текстом в решение и я его подтвержу.
Я выше вопрос уточняющий задал чтобы просто лучше понять как это работает чтобы в будущем подобные вопросы не задавать больше)))

Answer 1

[WbICHA]

const all = [{id:0}, {id:1}, {id:2}];
  const local = [{movieId:1}];
  
  const result = all.map((am) => {
    const lm = local.find((m) => m.movieId === am.id)
    return lm ?? am;
  });

а можешь, пожалуйста, уточнить насчет возвращаемого значения return lm ?? am;

https://developer.mozilla.org/ru/docs/Web/JavaScri...