在数组Vue Js中的另一个不同json对象中具有相同值的数组中的所有json对象中添加/合并新项目

Posted 2023-02-22

【中文标题】在数组Vue Js中的另一个不同json对象中具有相同值的数组中的所有json对象中添加/合并新项目

【英文标题】：Add/Merge new Item in all json object in array that has same value in another different json object in array Vue Js

【发布时间】：2020-09-27 07:14:47

【问题描述】：

您好，我是一个新手，我正在尝试在数组中的所有 json 对象中添加/合并新项，该对象在数组 Vue Js 中的另一个不同 json 对象中具有相同的值。我只知道如何在 json 中推送另一个 json 对象，任何人都可以建议我，我将非常感谢任何建议或帮助。在此先感谢

JSON 1 (Main)

[
  
    name: "a",
    id: 2,
    price: 300
  ,
  
    name: "b",
    id: 3,
    price: 100
  ,
  
    name: "c",
    id: 4,
    price: 50
  
]


JSON 2 (List)

[
  
    color: "red",
    id: w2,
    uuid: "3"
  ,
  
    color: "blue",
    id: y2,
    uuid: "4"
  ,
  
    color: "pink",
    id: xf,
    uuid: "3"
  ,
  
    color: "black",
    id: jf,
    uuid: "7"
  
]

如果 JSON 2 (List) 的 uuid 与 JSON 1 (Main) 的 id 相同，则在名为 name 的对象内的 JSON 2 (List) 中添加另一个项目值将是 JSON 1 (Main) 名称并删除 JSON 的 json 对象2（列表）的 uuid 与 jSON 1（主）的 id 不匹配，如

  
    color: "black",
    id: jf,
    uuid: "7"
   //will be remove



    Expected Output
[
  
    name: "b",
    color: "red",
    id: w2,
    uuid: "3"
  ,
  
    name: "c",
    color: "blue",
    id: y2,
    uuid: "4"
  ,
  
    name: "b",
    color: "pink",
    id: xf,
    uuid: "3"
  
]

【参考方案1】：

您可以使用Array.reduce 返回匹配项的列表。这是操作数组的非常强大的方法，允许您返回各种各样的输出。

我们遍历 json2 数组，并尝试在 json1 数组中找到匹配项（使用 Array.find）。如果我们根据 uuid = id 找到匹配，我们将合并的对象添加到我们返回的数组中；

let json1 = [  name: "a", id: 2, price: 300 ,  name: "b", id: 3, price: 100 ,  name: "c", id: 4, price: 50  ];

let json2 = [  color: "red", id: 'w2', uuid: "3" ,  color: "blue", id: 'y2', uuid: "4" ,  color: "pink", id: 'xf', uuid: "3" ,  color: "black", id: 'jf', uuid: "7"  ];

let result = json2.reduce((returnArray, item) => 
    // Let's look for a match in the json1 array.
    let match = json1.find(el => el.id == item.uuid);
    if (match) 
        // If we find a match, create a merged object (using all of the json2 props and name from json1.
        returnArray.push( ...item, name: match.name);
    
    return returnArray;
, []);

console.log("Result:", result);

【讨论】：

非常感谢，它工作正常，你解释得很好，非常感谢你的帮助

没问题！很高兴能提供帮助！如果您可以学习数组的 .map、.filter 和 .reduce，这些将非常有用。编码快乐！