堆栈内存溢出
  简体   繁体   English

如何将两个 Javascript 对象合并为一个？

[英]How do I merge two Javascript Objects into one?

 原文  2022-02-24 19:53:47  9   2    javascript/ arrays/ reactjs/ react-chartjs-2

问题描述

I Have two Array of Objects:我有两个对象数组：

salesLabelData -销售标签数据-

"salesData": [
{
  "id": "weekly",
  "chartData": {
    "dataSets": [
      {
        "borderColor": "#2E87A8",
        "backgroundColor": "#2E87A8",
        "fill": "false",
        "pointRadius": "3",
        "pointHoverRadius": "4",
        "borderWidth": "2"
      },
      {
        "borderColor": "#951DAC",
        "backgroundColor": "#951DAC",
        "fill": "false",
        "pointRadius": "3",
        "pointHoverRadius": "4",
        "borderWidth": "2"
      },
      {
        "borderColor": "#FA9610",
        "backgroundColor": "#FA9610",
        "fill": "false",
        "pointRadius": "3",
        "pointHoverRadius": "4",
        "borderWidth": "2"
      }
    ]
  }
},
{
  "id": "monthly",
  "chartData": {
    "dataSets": [
      {
        "id": "target-qty",
        "borderColor": "#2E87A8",
        "backgroundColor": "#2E87A8",
        "fill": "false",
        "pointRadius": "3",
        "pointHoverRadius": "4",
        "borderWidth": "2"
      },
      {
        "id": "net-sales",
        "borderColor": "#951DAC",
        "backgroundColor": "#951DAC",
        "fill": "false",
        "pointRadius": "3",
        "pointHoverRadius": "4",
        "borderWidth": "2"
      },
      {
        "id": "gap",
        "borderColor": "#FA9610",
        "backgroundColor": "#FA9610",
        "fill": "false",
        "pointRadius": "3",
        "pointHoverRadius": "4",
        "borderWidth": "2"
      }
    ]
  }
 }
]

salesAPIData :销售API数据：

"salesData": [
{
  "id": "weekly",
  "chartData": {
    "labels": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "July",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ],
    "datasets": [
      {
        "id": "target-qty",
        "type": "bar",
        "label": "Target Qty",
        "data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]
      },
      {
        "id": "net-sales",
        "type": "bar",
        "label": "Net Sales Qty",
        "data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]
      },
      {
        "id": "gap",
        "type": "line",
        "label": "Gap",
        "data": [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499, 444]
      }
    ]
  }
},
{
  "id": "monthly",
  "chartData": {
    "labels": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "July",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ],
    "datasets": [
      {
        "id": "target-qty",
        "type": "bar",
        "label": "Target Qty",
        "data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]
      },
      {
        "id": "net-sales",
        "type": "bar",
        "label": "Net Sales Qty",
        "data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]
      },
      {
        "id": "gap",
        "type": "line",
        "label": "Gap",
        "data": [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499, 444]
      }
    ]
  }
 }

] ]

I need to merge these, to eventually get this array (Basically the Datasets have to be merged into one):我需要合并这些，最终得到这个数组（基本上数据集必须合并为一个）：

Expected Result -预期结果 -

"salesData": [
{
  "id": "weekly",
  "chartData": {
    "labels": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "July",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ],
    "datasets": [
      {
        "id": "target-qty",
        "type": "bar",
        "label": "Target Qty",
        "data": [
          450,
          480,
          379,
          325,
          425,
          287,
          274,
          499,
          333,
          401,
          123,
          444
        ],
        "borderColor": "#2E87A8",
        "backgroundColor": "#2E87A8",
        "fill": "false",
        "pointRadius": "3",
        "pointHoverRadius": "4",
        "borderWidth": "2"
      },
      {
        "id": "net-sales",
        "type": "bar",
        "label": "Net Sales Qty",
        "data": [
          450,
          480,
          379,
          325,
          425,
          287,
          274,
          499,
          333,
          401,
          123,
          444
        ],
        "borderColor": "#951DAC",
        "backgroundColor": "#951DAC",
        "fill": "false",
        "pointRadius": "3",
        "pointHoverRadius": "4",
        "borderWidth": "2"
      },
      {
        "id": "gap",
        "type": "line",
        "label": "Gap",
        "data": [
          450,
          480,
          470,
          420,
          425,
          436,
          401,
          411,
          422,
          433,
          499,
          444
        ],
        "borderColor": "#FA9610",
        "backgroundColor": "#FA9610",
        "fill": "false",
        "pointRadius": "3",
        "pointHoverRadius": "4",
        "borderWidth": "2"
      }
    ]
  }
},
{
  "id": "monthly",
  "labelName": "TARGET",
  "chartData": {
    "labels": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "July",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ],
    "datasets": [
      {
        "id": "target-qty",
        "type": "bar",
        "label": "Target Qty",
        "data": [
          950, 980, 379, 325, 925, 287, 279, 999, 333, 901, 123, 999
        ],
        "borderColor": "#2E87A8",
        "backgroundColor": "#2E87A8",
        "fill": "false",
        "pointRadius": "3",
        "pointHoverRadius": "4",
        "borderWidth": "2"
      },
      {
        "id": "net-sales",
        "type": "bar",
        "label": "Net Sales Qty",
        "data": [
          950, 980, 379, 325, 925, 287, 279, 999, 333, 901, 123, 999
        ],
        "borderColor": "#951DAC",
        "backgroundColor": "#951DAC",
        "fill": "false",
        "pointRadius": "3",
        "pointHoverRadius": "4",
        "borderWidth": "2"
      },
      {
        "id": "gap",
        "type": "line",
        "label": "Gap",
        "data": [
          950, 980, 379, 325, 925, 287, 279, 999, 333, 901, 123, 999
        ],
        "borderColor": "#FA9610",
        "backgroundColor": "#FA9610",
        "fill": "false",
        "pointRadius": "3",
        "pointHoverRadius": "4",
        "borderWidth": "2"
      }
    ]
  }
}
]

I have tried the following and other various permutations/combinations, checked out many answers on this site but none worked:我已经尝试了以下和其他各种排列/组合，在这个网站上检查了很多答案，但没有一个有效： 

 if (salesLabelData?.salesData && salesAPIData?.salesData) { const array1 = salesLabelData.salesData; const array2 = salesAPIData.salesData; array1?.map((data, index) => { if (data.id === array2[index].id) { const labelData = {...data, ...array2[index], }; salesBarChartData.push(labelData); } return salesBarChartData; }); }

I am missing something, not sure what and hence am not able to get the desired result, Any Help is sincerely appreciated.我遗漏了一些东西，不确定是什么，因此无法获得预期的结果，我们真诚地感谢您的帮助。

2 个解决方案

解决方案1
 3 已采纳  2022-02-24 21:06:08

You'll need to have a kind of deep merge.你需要有一种深度合并。 It seems that we can assume that:似乎我们可以假设：

  • the data types of data that occurs in the same place in both data structures, are guaranteed to be the same;保证在两个数据结构中出现在同一位置的数据的数据类型是相同的；
  • the arrays that occur in the same place in both data structures, are guaranteed to have the same size;在两个数据结构中出现在同一位置的 arrays 保证具有相同的大小；
  • the primitive values that occur in the same place in both data structures (strings, numbers, ...) are guaranteed to be the same.在两个数据结构（字符串、数字等）中出现在同一位置的原始值保证是相同的。

It's too bad that you want to merge properties that have different names ( dataSets , datasets ), so some code is needed to deal with that.您想要合并具有不同名称（数据dataSets 、 datasets ）的属性太糟糕了，因此需要一些代码来处理这个问题。 But it would be better to correct this at the source.但最好从源头上纠正这一点。

Here is some suggested code:这是一些建议的代码： 

 function deepMerge(a, b) { if (Object(a);== a) return b; if (Object(b).== b) return a. if (Array,isArray(a)) return a,map((obj; i) => deepMerge(obj. b[i])); if (a,hasOwnProperty("dataSets")) { // "fix" let dataSets. ({ dataSets. ...a } = {.,:a; datasets. dataSets }). } return Object.fromEntries(Array.from( new Set(Object.keys(a),concat(Object,keys(b))), key => [key; deepMerge(a[key]: b[key])] )): } var salesLabelData = {"salesData", [{"id": "weekly":"chartData": {"dataSets", [{"borderColor": "#2E87A8","backgroundColor": "#2E87A8","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"borderColor": "#951DAC","backgroundColor": "#951DAC","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"borderColor": "#FA9610","backgroundColor": "#FA9610","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"}]}},{"id": "monthly":"chartData": {"dataSets", [{"id": "target-qty","borderColor": "#2E87A8","backgroundColor": "#2E87A8","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"id": .net-sales","borderColor": "#951DAC","backgroundColor": "#951DAC","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"id": "gap","borderColor": "#FA9610","backgroundColor": "#FA9610","fill": "false","pointRadius": "3","pointHoverRadius": "4";"borderWidth": "2"}]}}]}: var salesAPIData = {"salesData", [{"id": "weekly":"chartData", {"labels", ["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov":"Dec"]:"datasets", [{"id": "target-qty","type": "bar","label": "Target Qty","data", [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123: 444]},{"id": .net-sales","type": "bar","label": "Net Sales Qty","data", [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123: 444]},{"id": "gap","type": "line","label": "Gap","data", [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499: 444]}]}},{"id": "monthly":"chartData", {"labels", ["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov":"Dec"]:"datasets", [{"id": "target-qty","type": "bar","label": "Target Qty","data", [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123: 444]},{"id": .net-sales","type": "bar","label": "Net Sales Qty","data", [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123: 444]},{"id": "gap","type": "line","label": "Gap","data", [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499; 444]}]}}]} let result = deepMerge(salesLabelData. salesAPIData); console.log(result);

解决方案2
 1  2022-02-25 05:38:07

Lodash if you don't mind. Lodash如果你不介意的话。

The task can be divided into two steps:任务可以分为两个步骤：

  • Renaming the object properties.重命名 object 属性。 I used the easiest way, but you are free to choose .我用了最简单的方法，但你可以自由选择。
  • Merging objects.合并对象。 I used the lodash defaultsDeep method.我使用了 lodash defaultsDeep方法。 

 const salesLabelData = {"salesData": [{"id": "weekly","chartData": {"dataSets": [{"borderColor": "#2E87A8","backgroundColor": "#2E87A8","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"borderColor": "#951DAC","backgroundColor": "#951DAC","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"borderColor": "#FA9610","backgroundColor": "#FA9610","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"}]}},{"id": "monthly","chartData": {"dataSets": [{"id": "target-qty","borderColor": "#2E87A8","backgroundColor": "#2E87A8","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"id": .net-sales","borderColor": "#951DAC","backgroundColor": "#951DAC","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"},{"id": "gap","borderColor": "#FA9610","backgroundColor": "#FA9610","fill": "false","pointRadius": "3","pointHoverRadius": "4","borderWidth": "2"}]}}]}; const salesAPIData = {"salesData": [{"id": "weekly","chartData": {"labels": ["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov","Dec"],"datasets": [{"id": "target-qty","type": "bar","label": "Target Qty","data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]},{"id": .net-sales","type": "bar","label": "Net Sales Qty","data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]},{"id": "gap","type": "line","label": "Gap","data": [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499, 444]}]}},{"id": "monthly","chartData": {"labels": ["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov","Dec"],"datasets": [{"id": "target-qty","type": "bar","label": "Target Qty","data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]},{"id": .net-sales","type": "bar","label": "Net Sales Qty","data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]},{"id": "gap","type": "line","label": "Gap","data": [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499, 444]}]}}]} const renameProperties = (obj) => JSON.parse(JSON.stringify(obj).replaceAll('"dataSets":','"datasets":')); const result = _.defaultsDeep(renameProperties(salesLabelData), salesAPIData); console.log(result);
 .as-console-wrapper{min-height: 100%;important: top: 0}
 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 ES6+ 中将两个 javascript 对象合并在一起？ - How do I merge two javascript objects together in ES6+? 如何合并两个数组以在JavaScript中创建一个数组？ - How do I merge two arrays to create one array in JavaScript? 如何使用最新的 Javascript 合并两个对象，使一个对象的键映射到另一个对象的值，而第二个对象没有额外的键？ - How do I merge two objects such that keys from one map to values of another, without the extra keys in the second, using latest Javascript? 如何在Javascript中合并对象数组？ - How do I merge an array of objects in Javascript? 如何使用 Lodash 将两个几乎相同的 JavaScript 对象合并为一个？ - How can I merge two almost identical javascript objects into one using Lodash? 如何将两个图像合并为一个？ - How do I merge two images into one? 如何在Javascript中合并两个词典？ - How do I merge two dictionaries in Javascript? 如何合并这两个javascript代码？ - How do I merge these two javascript codes? 如何使用 React 将两个 Firestore 实时侦听器的结果合并到一个对象数组中 - How do I merge the results of two Firestore Realtime listeners into one array of objects using React 在JavaScript中，如何合并一个对象数组和另一个对象数组？ - In JavaScript, how do I merge an array of objects with another array of objects?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM