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

Question

我有两个对象数组：

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:

"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]
      }
    ]
  }
 }

]

我需要合并这些，最终得到这个数组（基本上数据集必须合并为一个）：

预期结果 -

"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"
      }
    ]
  }
}
]

我已经尝试了以下和其他各种 permutations/combinations，检查了该网站上的许多答案，但 none 有效：

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

我遗漏了一些东西，不确定是什么，因此无法获得想要的结果，我们真诚地感谢您的帮助。

Answer 1

您需要进行某种深度合并。看来我们可以假设：

两种数据结构中出现在同一位置的数据的数据类型，保证相同；
在两种数据结构中出现在同一位置的数组保证具有相同的大小；
在两种数据结构（字符串、数字等）中出现在同一位置的原始值保证相同。

想要合并具有不同名称（dataSets、datasets）的属性太糟糕了，因此需要一些代码来处理这个问题。不过最好从源头上改正。

这是一些建议的代码：

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

Answer 2

Lodash 如果你不介意的话。

任务可分为两步：

正在重命名对象属性。我用的是最简单的方法，大家可以随意 choose.
合并对象。我使用了 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>

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

How do I merge two Javascript Objects into one?

javascript

arrays

reactjs

react-chartjs-2