比较 2 个嵌套的 Json 数组，通过 Json B 覆盖和合并 Json A

问题描述

我有 2 个 json 数组，需要比较它们，如果 Json A 中的“id”属性与 Json B 中的“id”属性匹配，则用 Json B 属性值覆盖 Json A 属性值

Json 数组：

{
"components":[
    {
        "id":"uibuilder:fa10894e44b3460c93912198a99e3629","component":{
            "name":"Hero","properties":{
                "imageUrl":"https://images.unsplash.com/photo-1532298229144-0ec0c57515c7?ixid=MnwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80","caption1":"New Collection","caption2":"About this collection","buttonText":"Click Me!"
            }
        },"componentStyle":{
            "large":{
                "display":"flex","flexDirection":"column","position":"relative","flexShrink":"0","BoxSizing":"border-Box","marginTop":"20px","minHeight":"20px","minWidth":"20px","overflow":"hidden"
            }
        }
    },{
        "id":"uibuilder:8818c12fe5c94b27b7f7033fec7910b6","component":{
            "name":"Text","properties":{
                "text":"<p>This iss text</p>"
            }
        },{
        "id":"uibuilder:8818c12fe5c94b25c94b23fec033fec7","component":{
            "name":"Text New","properties":{
                "text":"<b>Component heading</b>"
            }
        },"marginTop":"10px","minHeight":"10px","minWidth":"10px","overflow":"hidden"
            }
        }
    }
]

Json B 数组

{
"components":[
    {
        "id":"uibuilder:fa10894e44b3460c93912198a99e3629","caption1":"Faucet Collection","caption2":"","marginTop":"50px","minHeight":"50px","minWidth":"50px","overflow":"hidden"
            }
        }
    }
]

当比较 Json A 有 3 个子组件和 Json B 有 2 个子组件时， 来自 Json B 的 2 个组件 ID 与 Json A 的 2 个组件 ID 匹配，

预期输出 Json Array 应如下所示，Json A 组件的第二个子组件应保持原样

预期输出

{
"components":[
    {
        "id":"uibuilder:fa10894e44b3460c93912198a99e3629","overflow":"hidden"
            }
        }
    }
]

解决方法

const jsonA = { components: [{ id: 'a' },{ id: 'b',test: 'a' }] }
const jsonB = { components: [{ id: 'b',test: 'b' },{ id: 'c' }] }

const combined = { components: jsonA.components }

for (const itemB of jsonB.components) {
  // Check if a has the item
  const indexInA = jsonA.components.findIndex((itemA) => itemA.id === itemB.id)
  // Not in A? Lets add it 
  if (indexInA === -1) combined.components.push(itemB)
  // It exists? Let's replace it
  else combined.components.splice(indexInA,1,itemB)
}

// {"components":[{"id":"a"},{"id":"b","test":"b"},{"id":"c"}]}
console.log(combined)

,

你可以这样做：

const jsonA = {components: [{id: 'uibuilder:fa10894e44b3460c93912198a99e3629',component: {name: 'Hero',properties: {imageUrl:'https://images.unsplash.com/photo-1532298229144-0ec0c57515c7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80',caption1: 'New Collection',caption2: 'About this collection',buttonText: 'Click Me!',},componentStyle: {large: {display: 'flex',flexDirection: 'column',position: 'relative',flexShrink: '0',boxSizing: 'border-box',marginTop: '20px',minHeight: '20px',minWidth: '20px',overflow: 'hidden',{id: 'uibuilder:8818c12fe5c94b27b7f7033fec7910b6',component: {name: 'Text',properties: {text: '<p>This iss text</p>',{id: 'uibuilder:8818c12fe5c94b25c94b23fec033fec7',component: {name: 'Text New',properties: {text: '<b>Component heading</b>',marginTop: '10px',minHeight: '10px',minWidth: '10px',],};
const jsonB = {components: [{id: 'uibuilder:fa10894e44b3460c93912198a99e3629',caption1: 'Faucet Collection',caption2: '',marginTop: '50px',minHeight: '50px',minWidth: '50px',};

const result = jsonA.components.map(ac => ({
  ...ac,...jsonB.components.find(bc => ac.id === bc.id)
}))

console.log(result)