如果项id在javascript中相同，则映射两个数组以将不同的数据合并到一个数组中

Question

多亏了另一篇文章，我可以在我教的很容易的过程中领先一步。但是似乎我不能通过对每个"id“公共字段进行”分组“来将两个数组合并为一个数组……

下面是我的一个数组：

// editedItem.extra_tools ///

0:
{
    extra_tool_password: "tool data password"
    extra_tool_username: "tool data username"
    id_extra_tool: "8"
},
1:
{
    extra_tool_password: "tool data password"
    extra_tool_username: "tool data username"
    id_extra_tool: "1"
},
2:
{
    extra_tool_password: "tool data password"
    extra_tool_username: "tool data username"
    id_extra_tool: "7"
}

应该通过id_extra_tool将其合并到：

// this.extras //
0:
{
    extra_params: 1
    extra_tool_name: "tool 1"
    extra_tool_password: ""
    extra_tool_username: ""
    id_extra_tool: 1
}
1:
{
    extra_params: 1
    extra_tool_name: "tool 2"
    extra_tool_password: ""
    extra_tool_username: ""
    id_extra_tool: 7
}
{
2:
    extra_params: 0
    extra_tool_name: "tool 3"
    extra_tool_password: ""
    extra_tool_username: ""
    id_extra_tool: 8

来获得一个

//mergedArray //

if (this.editedItem.extra_tools.length) {
        var mergedArray = []
        this.editedItem.extra_tools.map(x => {
          this.extras.map(y => {
            if (x.id_extra_tool === y.id_extra_tool) {
              mergedArray.push(Object.assign(x, y))
            }
          })
        })

因此，最终的数组应该包含来自每个数组的“完整”数据，通过id_extra_tool完成每一项的数据合并

// merged //
0:
{
    extra_params: // TAKEN_BY: "Extras"
    extra_tool_name: // TAKEN_BY: "Extras"
    extra_tool_password:// TAKEN_BY: "extra_tools"
    extra_tool_username: // TAKEN_BY: "extra_tools"
    id_extra_tool: 1
}
1:
{
    extra_params: // TAKEN_BY: "Extras"
    extra_tool_name: // TAKEN_BY: "Extras"
    extra_tool_password:// TAKEN_BY: "extra_tools"
    extra_tool_username: // TAKEN_BY: "extra_tools"
    id_extra_tool: 7
}
{
2:
    extra_params: // TAKEN_BY: "Extras"
    extra_tool_name: // TAKEN_BY: "Extras"
    extra_tool_password:// TAKEN_BY: "extra_tools"
    extra_tool_username: // TAKEN_BY: "extra_tools"
    id_extra_tool: 8

Answer 1

您正在尝试使用===将string与integer进行比较，这是错误的(请使用== )。

最好使用.find检查每个x元素在extras中是否都有一个具有相同id_extra_tool的对应对象

​

const editedItem = {
  extra_tools: [
    {
      extra_tool_password: "tool data password",
      extra_tool_username: "tool data username",
      id_extra_tool: "8"
    },
    {
      extra_tool_password: "tool data password",
      extra_tool_username: "tool data username",
      id_extra_tool: "1"
    },
    {
      extra_tool_password: "tool data password",
      extra_tool_username: "tool data username",
      id_extra_tool: "7"
    }
  ]
};
const extras = [
  {
    extra_params: 1,
    extra_tool_name: "tool 1",
    extra_tool_password: "",
    extra_tool_username: "",
    id_extra_tool: 1
  },
  {
    extra_params: 1,
    extra_tool_name: "tool 2",
    extra_tool_password: "",
    extra_tool_username: "",
    id_extra_tool: 7
  },
  {
    extra_params: 0,
    extra_tool_name: "tool 3",
    extra_tool_password: "",
    extra_tool_username: "",
    id_extra_tool: 8
  }
];

if (editedItem.extra_tools.length) {

  var mergedArray = [];
  
  editedItem.extra_tools.map(x => {
  
    const y = extras.find(e => e.id_extra_tool == x.id_extra_tool);
    
    if (y) {
      mergedArray.push(Object.assign(x, y))
    }
  });
  
  console.log(mergedArray);
}

​

另一种方法是使用.reduce

​

const editedItem = {
  extra_tools: [
    {
      extra_tool_password: "tool data password",
      extra_tool_username: "tool data username",
      id_extra_tool: "8"
    },
    {
      extra_tool_password: "tool data password",
      extra_tool_username: "tool data username",
      id_extra_tool: "1"
    },
    {
      extra_tool_password: "tool data password",
      extra_tool_username: "tool data username",
      id_extra_tool: "7"
    }
  ]
};
const extras = [
  {
    extra_params: 1,
    extra_tool_name: "tool 1",
    extra_tool_password: "",
    extra_tool_username: "",
    id_extra_tool: 1
  },
  {
    extra_params: 1,
    extra_tool_name: "tool 2",
    extra_tool_password: "",
    extra_tool_username: "",
    id_extra_tool: 7
  },
  {
    extra_params: 0,
    extra_tool_name: "tool 3",
    extra_tool_password: "",
    extra_tool_username: "",
    id_extra_tool: 8
  }
];

if (editedItem.extra_tools.length) {

  const mergedArray = editedItem.extra_tools.reduce((acc,x) => {
  
    const y = extras.find(e => e.id_extra_tool == x.id_extra_tool);
    
    if (y) {
      acc.push(Object.assign(x, y))
    }
    
    return acc;
  }, []);
  
  console.log(mergedArray);
}

​

Answer 2

editedItem.extra_tools和this.extras中的id_extra_tool不是同一类型(string和number)，因此比较x.id_extra_tool === y.id_extra_tool将始终返回false，请尝试更改以改用==。

使用map的简短示例：

const mergedArray = this.extras.map(item => ({
  ...item,
  ...editedItem.extra_tools.find(i => i.id_extra_tool == item.id_extra_tool)
}));

Answer 3

首先，假设id_extra_tool总是唯一的，我将使用id_extra_tool作为对象键，在键/值对象中构建一个数组。这有助于提高性能。

然后与第二个数组合并

// build key/value object
obj = {};
editedItem.extra_tools.map((value) => {
  obj[value.id_extra_tool] = value;
});

// iterate other array and merge
const result = this.extras.map((extra) => {
  return Object.assign(obj[extra.id_extra_tool], extra);
});

​

const extra_tools = [
{
    extra_tool_password: "tool data password",
    extra_tool_username: "tool data username",
    id_extra_tool: "8"
},
{
    extra_tool_password: "tool data password",
    extra_tool_username: "tool data username",
    id_extra_tool: "1"
},
{
    extra_tool_password: "tool data password",
    extra_tool_username: "tool data username",
    id_extra_tool: "7"
}
];


const extras = [
{
    extra_params: 1,
    extra_tool_name: "tool 1",
    extra_tool_password: "",
    extra_tool_username: "",
    id_extra_tool: 1
},
{
    extra_params: 1,
    extra_tool_name: "tool 2",
    extra_tool_password: "",
    extra_tool_username: "",
    id_extra_tool: 7
},
{
    extra_params: 0,
    extra_tool_name: "tool 3",
    extra_tool_password: "",
    extra_tool_username: "",
    id_extra_tool: 8
}
];

obj = {};
extra_tools.map((value) => {
obj[value.id_extra_tool] = value;
});

// iterate other array
const result = extras.map((extra) => {
return Object.assign(extra, obj[extra.id_extra_tool]);
});
console.log(result);

​