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

Question

我有2个json数组，需要比较它们，如果Json中的“id”属性匹配[=29中的“id”属性 =] B，用 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>"
            }
        },
        "componentStyle":{
            "large":{
                "display":"flex",
                "flexDirection":"column",
                "position":"relative",
                "flexShrink":"0",
                "boxSizing":"border-box",
                "marginTop":"20px",
                "minHeight":"20px",
                "minWidth":"20px",
                "overflow":"hidden"
            }
        }
    },
    {
        "id":"uibuilder:8818c12fe5c94b25c94b23fec033fec7",
        "component":{
            "name":"Text New",
            "properties":{
                "text":"<b>Component heading</b>"
            }
        },
        "componentStyle":{
            "large":{
                "display":"flex",
                "flexDirection":"column",
                "position":"relative",
                "flexShrink":"0",
                "boxSizing":"border-box",
                "marginTop":"10px",
                "minHeight":"10px",
                "minWidth":"10px",
                "overflow":"hidden"
            }
        }
    }
]

Json B 数组

{
"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":"Faucet Collection",
                "caption2":"",
                "buttonText":"Click Me!"
            }
        },
        "componentStyle":{
            "large":{
                "display":"flex",
                "flexDirection":"column",
                "position":"relative",
                "flexShrink":"0",
                "boxSizing":"border-box",
                "marginTop":"10px",
                "minHeight":"10px",
                "minWidth":"10px",
                "overflow":"hidden"
            }
        }
    },
    {
        "id":"uibuilder:8818c12fe5c94b25c94b23fec033fec7",
        "component":{
            "name":"Text New",
            "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":"50px",
                "minHeight":"50px",
                "minWidth":"50px",
                "overflow":"hidden"
            }
        }
    }
]

比较时 Json A 有 3 个子组件 & Json B 有 2 个子组件，来自 Json B 的 2 个组件 ID 与 Json A，

的 2 个组件 ID 匹配

预期输出 Json 数组应如下所示，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":"Faucet Collection",
                "caption2":"",
                "buttonText":"Click Me!"
            }
        },
        "componentStyle":{
            "large":{
                "display":"flex",
                "flexDirection":"column",
                "position":"relative",
                "flexShrink":"0",
                "boxSizing":"border-box",
                "marginTop":"10px",
                "minHeight":"10px",
                "minWidth":"10px",
                "overflow":"hidden"
            }
        }
    },
    {
        "id":"uibuilder:8818c12fe5c94b27b7f7033fec7910b6",
        "component":{
            "name":"Text",
            "properties":{
                "text":"<p>This iss text</p>"
            }
        },
        "componentStyle":{
            "large":{
                "display":"flex",
                "flexDirection":"column",
                "position":"relative",
                "flexShrink":"0",
                "boxSizing":"border-box",
                "marginTop":"20px",
                "minHeight":"20px",
                "minWidth":"20px",
                "overflow":"hidden"
            }
        }
    },
    {
        "id":"uibuilder:8818c12fe5c94b25c94b23fec033fec7",
        "component":{
            "name":"Text New",
            "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":"50px",
                "minHeight":"50px",
                "minWidth":"50px",
                "overflow":"hidden"
            }
        }
    }
]

Answer 1

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)

Answer 2

你可以这样做：

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>',},},componentStyle: {large: {display: 'flex',flexDirection: 'column',position: 'relative',flexShrink: '0',boxSizing: 'border-box',marginTop: '20px',minHeight: '20px',minWidth: '20px',overflow: 'hidden',},},},{id: 'uibuilder:8818c12fe5c94b25c94b23fec033fec7',component: {name: 'Text New',properties: {text: '<b>Component heading</b>',},},componentStyle: {large: {display: 'flex',flexDirection: 'column',position: 'relative',flexShrink: '0',boxSizing: 'border-box',marginTop: '10px',minHeight: '10px',minWidth: '10px',overflow: 'hidden',},},},],};
const jsonB = {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: 'Faucet Collection',caption2: '',buttonText: 'Click Me!',},},componentStyle: {large: {display: 'flex',flexDirection: 'column',position: 'relative',flexShrink: '0',boxSizing: 'border-box',marginTop: '10px',minHeight: '10px',minWidth: '10px',overflow: 'hidden',},},},{id: 'uibuilder:8818c12fe5c94b25c94b23fec033fec7',component: {name: 'Text New',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: '50px',minHeight: '50px',minWidth: '50px',overflow: 'hidden',},},},],};

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

console.log(result)

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

Compare 2 nested Json Array, Override and merge Json A by Json B

arrays

json

node.js

compare-and-swap

express