Javascript：合并同一键上的 JSON 对象列表并删除未合并的对象

Question

我查看了 SO 中的每个“在同一键上合并 JSON 对象”问题，但无济于事。

我有两个不同长度的 JSON 对象数组，就像这样，我需要合并每个具有共享键的 JSON 对象（在本例中为 realName）并转储两者中未出现的内容：

  let arrObjA = [{
    "index": 114,
    "realName": 'kevin',
    "bucket": 'boss',
    "react_name": 'BossKevin'
  },
  {
    "index": 115,
    "realName": 'angela',
    "bucket": 'boss',
    "react_name": 'BossAngela'
  },
  {
    "index": 116,
    "realName": 'james',
    "bucket": 'janitor',
    "react_name": 'JanitorJames'
  },
  {
    "index": 117,
    "realName": 'arthur',
    "bucket": 'employee',
    "react_name": 'EmployeeArthur'
  }
]

和

let arrObjB = [{
        "boxName": "building",
        "realName": "angela",
        "boxValue": "2"
      },
      {
        "boxName": "building",
        "realName": "james",
        "boxValue": "false"
      },
      {
        "boxName": "building",
        "realName": "arthur",
        "boxValue": "0"
      },
      ]

结果应该是：

let result = [{
    "index": 115,
    "realName": 'angela',
    "bucket": 'boss',
    "react_name": 'BossAngela',
    "boxName": "building",
    "boxValue": "2"
  },
  {
    "index": 116,
    "realName": 'james',
    "bucket": 'janitor',
    "react_name": 'JanitorJames',
    "boxName": "building",
    "boxValue": "false"
  },
  {
    "index": 117,
    "realName": 'arthur',
    "bucket": 'employee',
    "react_name": 'EmployeeArthur',
    "boxName": "building",
    "boxValue": "0"
  }
]

因此，新数组 (result) 中的新 JSON 对象是合并的 JSON 对象，其中键 realName 在原始 JSON 对象之间共享（例如，arrObjA["realName"] === arrObjB["realName"]）。并且带有来自arrObjA 的realName“kevin”的一个 JSON 对象 not 在新数组中，因为它的键/值不会出现在 both 的 JSON 对象中 em> 数组。

我从另一个 SO 答案中尝试了以下内容，这使我最接近我需要的结果（在我尝试过的所有其他几十个答案中），但我只得到一个键/值，因为我不知道如何扩展对象。

const mappingEngine = (arrA, arrB) => {
  const resultsKeys = ["realName", "bucket"];

  const result = arrA
    .filter(function (o1) {
      return arrB.some(function (o2) {
        return o1.realName === o2.realName; // assumes unique id
      });
    })
    .map(function (o) {
      console.log(o)
      return resultsKeys.reduce(function (newo, name) {
        newo[name] = o[name];
        return newo;
      }, {});
    });
  return result;
};

感谢您的帮助。

Answer 1

我有一个不同的方法来解决你的问题。我不使用 reduce 。我映射第一个数组，并在映射过滤器内部过滤第二个数组中与映射的实际元素匹配的第一个元素。这是我如何用代码做到的：

let arrObjA = [{
    "index": 114,
    "realName": 'kevin',
    "bucket": 'boss',
    "react_name": 'BossKevin'
  },
  {
    "index": 115,
    "realName": 'angela',
    "bucket": 'boss',
    "react_name": 'BossAngela'
  },
  {
    "index": 116,
    "realName": 'james',
    "bucket": 'janitor',
    "react_name": 'JanitorJames'
  },
  {
    "index": 117,
    "realName": 'arthur',
    "bucket": 'employee',
    "react_name": 'EmployeeArthur'
  }
];

let arrObjB = [{
    "boxName": "building",
    "realName": "angela",
    "boxValue": "2"
  },
  {
    "boxName": "building",
    "realName": "james",
    "boxValue": "false"
  },
  {
    "boxName": "building",
    "realName": "arthur",
    "boxValue": "0"
  },
];

const mappingEngine = (arrA, arrB) => {
  const a_key = "realName";
  const b_key = "realName";

  const result = arrA
    .map(function(o) {
      let b = arrB.filter(n_b => o[a_key] == n_b[b_key]);
      //Take the first element that is compatible
      if (b == null) {
        return {
          o
        };
      } else {
        let c = b[0];
        return { ...o,
          ...c
        };
      }
    });
  console.log(result);
  return result;
};

mappingEngine(arrObjA,arrObjB);

请使用过滤器删除 arrA 上而不是 arrB 上的键。 我只是从 arrA 到 arrB 进行左连接。就像：SELECT * FROM arrA LEFT JOIN arrB;

Answer 2

您可以使用 es6 spread (...) 运算符来对齐两个对象。

let arrObjA = [{ "index": 114, "realName": 'kevin', "bucket": 'boss', "react_name": 'BossKevin' }, { "index": 115, "realName": 'angela', "bucket": 'boss', "react_name": 'BossAngela' }, { "index": 116, "realName": 'james', "bucket": 'janitor', "react_name": 'JanitorJames' }, { "index": 117, "realName": 'arthur', "bucket": 'employee', "react_name": 'EmployeeArthur' }]
let arrObjB = [{ "boxName": "building", "realName": "angela", "boxValue": "2" }, { "boxName": "building", "realName": "james", "boxValue": "false" }, { "boxName": "building", "realName": "arthur", "boxValue": "0" },]

let result = arrObjB.map(item => ({
    ...arrObjA.find(({ realName }) => item.realName == realName),
    ...item,
}));

console.log(result)