合并嵌套的 JSON 陣列物件時遇到問題。
var o1 = {
"customerId": "ABC",
"questions": [
{
"status": 2,
"isBookmarked": 0,
"questionId": 1
}
]
}
var o2 = {
"customerId": "ABC",
"questions": [
{
"status": 1,
"isBookmarked": 1,
"questionId": 2
},
{
"status": 1,
"isBookmarked": 1,
"questionId": 3
}
]
}
問題陣列需要合并在一起。如果在兩個物件中發現相同的問題，則它應該采用 2 個物件值（o2 - 物件）。
我試著這樣做：
const o3 = Object.assign({}, o1, o2);
這是重現的鏈接 - https://jsfiddle.net/y97afosd/
預期產出 -
{
"customerId": "ABC",
"questions": [
{
"status": 2,
"isBookmarked": 0,
"questionId": 1
},
{
"status": 1,
"isBookmarked": 1,
"questionId": 2
},
{
"status": 1,
"isBookmarked": 1,
"questionId": 3
}
]
}
有人可以幫忙嗎？
uj5u.com熱心網友回復：
您的嘗試沒有成功，因為o2'questions陣列完全替換了o1's.
相反，如果沒有重復項，您可以使用 spread 復制其他物件屬性并將o2的問題附加到來自 的問題o1：
const o3 = {
...o1,
...o2,
questions: [...o1.questions, ...o2.questions]
};
或者，如果您出于某種原因想避免傳播語法，您可以使用Object.assignand Array.prototype.concat：
const o4 = Object.assign({}, o1, o2, {
questions: o1.questions.concat(o2.questions)
});
現場示例：
顯示代碼片段
const o1 = {
"customerId": "ABC",
"questions": [
{
"status": 2,
"isBookmarked": 0,
"questionId": 1
}
]
};
const o2 = {
"customerId": "ABC",
"questions": [
{
"status": 1,
"isBookmarked": 1,
"questionId": 2
},
{
"status": 1,
"isBookmarked": 1,
"questionId": 3
}
]
};
const o3 = {
...o1,
...o2,
questions: [...o1.questions, ...o2.questions]
};
console.log(o3);
// Or with `Object.assign`:
const o4 = Object.assign({}, o1, o2, {
questions: o1.questions.concat(o2.questions)
});
console.log(o4);.as-console-wrapper {
max-height: 100% !important;
}但是請注意，Object.assign（即使是您的問題中的那個）是多個回圈。它們只是不在您的代碼中。:-)
但是您已經說過可能存在重復項（我假設基于questionId）并且來自 的那些o1應該勝過來自 的那些o2。這稍微復雜一些，但沒那么復雜：
const o3 = {
...o1,
...o2,
questions: [...new Map([
...o2.questions.map(q => [q.questionId, q]), // Note o2 first...
...o1.questions.map(q => [q.questionId, q]), // ...so duplicates overwrite
]).values()]
};
不是四個回圈（兩個復制物件，兩個復制陣列），我們現在有八個（兩個復制物件，兩個映射陣列，兩個復制陣列，一個構建 Map，一個提取 Map 的值）在構建Map.
現場示例：
顯示代碼片段
const o1 = {
"customerId": "ABC",
"questions": [
{
"status": 2,
"isBookmarked": 0,
"questionId": 1
},
{ // Duplicated below with different status
"status": 1,
"isBookmarked": 0,
"questionId": 4
}
]
};
const o2 = {
"customerId": "ABC",
"questions": [
{
"status": 1,
"isBookmarked": 1,
"questionId": 2
},
{ // Duplicated above with different status
"status": 2,
"isBookmarked": 0,
"questionId": 4
},
{
"status": 1,
"isBookmarked": 1,
"questionId": 3
}
]
};
const o3 = {
...o1,
...o2,
questions: [...new Map([
...o2.questions.map(q => [q.questionId, q]), // Note o2 first...
...o1.questions.map(q => [q.questionId, q]), // ...so duplicates overwrite
]).values()]
};
console.log(o3);.as-console-wrapper {
max-height: 100% !important;
}如果太多，我們可以將其保留為四個（加上 中的一些索引查找Set）：
const o3 = {
...o1,
...o2,
questions: []
};
const seen = new Set();
for (const q of o1.questions) {
o3.questions.push(q);
seen.add(q.questionId);
}
for (const q of o2.questions) {
if (!seen.has(q.questionId)) {
o3.questions.push(q);
}
}
現場示例：
顯示代碼片段
const o1 = {
"customerId": "ABC",
"questions": [
{
"status": 2,
"isBookmarked": 0,
"questionId": 1
},
{ // Duplicated below with different status
"status": 1,
"isBookmarked": 0,
"questionId": 4
}
]
};
const o2 = {
"customerId": "ABC",
"questions": [
{
"status": 1,
"isBookmarked": 1,
"questionId": 2
},
{ // Duplicated above with different status
"status": 2,
"isBookmarked": 0,
"questionId": 4
},
{
"status": 1,
"isBookmarked": 1,
"questionId": 3
}
]
};
const o3 = {
...o1,
...o2,
questions: []
};
const seen = new Set();
for (const q of o1.questions) {
o3.questions.push(q);
seen.add(q.questionId);
}
for (const q of o2.questions) {
if (!seen.has(q.questionId)) {
o3.questions.push(q);
}
}
console.log(o3);.as-console-wrapper {
max-height: 100% !important;
}uj5u.com熱心網友回復：
您可以使用reduce方法來解決您的問題
var o1 = {
"customerId": "ABC",
"questions": [
{
"status": 2,
"isBookmarked": 0,
"questionId": 1
}
]
}
var o2 = {
"customerId": "ABC",
"questions": [
{
"status": 1,
"isBookmarked": 1,
"questionId": 2
},
{
"status": 1,
"isBookmarked": 1,
"questionId": 3
}
]
}
const o3 = o2.questions.reduce((arr, item) => {
arr.questions.push(item);
return arr;
}, o1);
console.log(o3);uj5u.com熱心網友回復：
我認為它按預期作業，問題是您正在嘗試合并具有相同確切屬性的物件，因此第二個物件內的屬性將覆寫第一個物件中的屬性。
嘗試向這兩個物件添加其他不同的屬性，您會發現該方法確實有效。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/452086.html
標籤：javascript 节点.js 数组 json