使用lodash合并兩個物件陣列-有解無憂

我有兩個名為 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時添加詳細資訊。我正在考慮為此使用低破折號？
我想從我的輸出中的電影和電影詳細資訊中選擇我想看到的每個物件（列名），即對于電影：電影名稱和成本。和電影細節：演員和成本。

預期輸出：

 {
    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 }));
      });

uj5u.com熱心網友回復：

你來了，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];

uj5u.com熱心網友回復：

如果我理解了一切，這里有一個純 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);

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/479137.html

標籤：json 有角度的打字稿罗达什

上一篇：從iframe中洗掉選單按鈕

下一篇：采用多種型別的引數并決定運行時行為的方法