如何解决比较 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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。