使用 lodash 合并两个对象数组

Question

我有两个名为 movies 和 movieDetails 的对象数组：

const movies = [{
        movieID: 0,
        movieDetailsID: 9,
        movieName: "Dragonball Z",
        cost: 10
    },
    {
        movieID: 1,
        movieDetailsID: 10,
        movieName: "Spider Man",
        cost: 15
    },
    {
        movieID: 2,
        movieDetailsID: 11,
        movieName: "John Wick",
        cost: 20
    }
];

const movieDetails = [{
        movieDetailsID: 10,
        actor: "John Doe",
        fee: 100
    },
    {
        movieDetailsID: 10,
        actor: "Harry Styles",
        fee: 120
    },
    {
        movieDetailsID: 11,
        actor: "John Bane",
        fee: 200
    }
];

我想知道如何合并这两个对象数组并仅在存在匹配的 movieDetailsID 时才添加 details。我正在考虑为此使用低破折号？
我想从我的输出中的电影和电影详细信息中选择我想看到的每个对象（列名），即对于电影：电影名称和成本。和电影详情：演员和成本。

预期输出：

 {
    movieID: 0,
    movieDetailsID: 9,
    movieName: "Dragonball Z",
    cost: 10
}, {
    movieID: 1,
    movieDetailsID: 10,
    movieName: "Spider Man",
    cost: 15,
    details: [{
            movieDetailsID: 10,
            actor: "John Doe",
            fee: 100
        },
        {
            movieDetailsID: 10,
            actor: "Harry Styles",
            fee: 120
        }
    ]
}, {
    movieID: 2,
    movieDetailsID: 11,
    movieName: "John Wick",
    cost: 20,
    details: [{
        movieDetailsID: 11,
        actor: "John Bane",
        fee: 200
    }]
}

我试过的。但是，这似乎将其合并，并且不会创建单独的项目详细信息以添加到那些匹配的电影详细信息 ID 中。

var mergedList = _.map(movies, function(item){
        return _.extend(item, _.findWhere(movieDetailsID, { movieDetailsID: item.movieDetailsID }));
      });

Answer 1

如果我明白了一切，这里有一个纯 JS 的解决方案：

const movies = [
  {
    movieID: 0,
    movieDetailsID: 9,
    movieName: "Dragonball Z",
    cost: 10
  },
  {
    movieID: 1,
    movieDetailsID: 10,
    movieName: "Spider Man",
    cost: 15
  },
  {
    movieID: 2,
    movieDetailsID: 11,
    movieName: "John Wick",
    cost: 20
  }
];

const movieDetails = [
  {
    movieDetailsID: 10,
    actor: "John Doe",
    fee: 100
  },
  {
    movieDetailsID: 10,
    actor: "Harry Styles",
    fee: 120
  },
  {
    movieDetailsID: 11,
    actor: "John Bane",
    fee: 200
  }
];

const result = movies.map(movie => {
  const details = movieDetails.filter(md => md.movieDetailsID === movie.movieDetailsID);

  const { movieID, movieDetailsID, ...movieKeys } = movie;
  
  const filteredMovie = { ...movieKeys };
  
  if (details.length) {
    const filteredDetails = details.map(({
      movieDetailsID,
      ...keys
    }) => keys);

    return ({
        ...filteredMovie,
        details: filteredDetails,
    });
  }

  return filteredMovie;
});

console.log(result);

Answer 2

给你，lodash解决方案，非常简单

import groupBy from "lodash/groupBy";
import reduce from "lodash/reduce";

const result = reduce(movies, ([movieDetailsIndex, res], movie) => [
  movieDetailsIndex,
  [...res, {...movie, ...(movieDetailsIndex[movie.movieDetailsID] ?
    {details: movieDetailsIndex[movie.movieDetailsID]} : {}
  )}]
], [groupBy(movieDetails, "movieDetailsID"), []])[1];

使用 lodash 合并两个对象数组

Merge two array of objects using lodash

json

angular

typescript

lodash