我有兩個物件陣列，我需要將它們合并在一起才能得到一個物件陣列。物件很多，都有500多個物件
這是兩個物件陣列的結構示例：
let API = [
{
actif: true,
id: 8,
creation_user: "David",
date_creation: "févr 4 2022 12:17PM",
description: "A description",
version: "v1r1"
},
{
actif: true,
id: 10,
creation_user: "Julien",
date_creation: "févr 10 2022 12:17PM",
description: "A description",
version: "v1r2"
},
{
actif: false,
id: 20,
creation_user: "Tom",
date_creation: "févr 10 2022 12:17PM",
description: "A description",
version: "v1r2"
}
]
let Parameters = [
{
id: 10,
name: "codeRR",
type: "string"
},
{
id: 20,
name: "codeAA",
type: "string"
},
{
id: 20,
name: "codeCC",
type: "string"
}
]正如我們所看到的，它們都有一個 ID，這個 ID 在兩個陣列中是相同的。但并非每次，API 都可以沒有引數。
我想要實作的是進入第二個陣列，“名稱”和“型別”，并將其添加到第一個陣列（或新陣列）。
我在第一個陣列上嘗試過 .map （也嘗試過第二個陣列）：
let Ressource = api.map(item => Object.assign({}, item, parametre.find(target => target.id === item.id)));
// Result of Ressource
[
{
actif: true,
id: 8,
creation_user: "David",
date_creation: "févr 4 2022 12:17PM",
description: "A description",
version: "v1r1";
name: "codeRR",
type: "string
}
]
// Want I want :
[
{
actif: true,
id: 8,
creation_user: "David",
date_creation: "févr 4 2022 12:17PM",
description: "A description",
version: "v1r1",
parameter: [
{
name: "codeRR",
type: "string
},
{
name: "codePP",
type: "string
}
]
}
]但是當一個 API 有多個引數時，它會覆寫前一個引數。是否有可能在我的 API 中做這樣的事情
parameter: [{"name": "codeRR", type: "string"}, {"name": "codePP", "type": "string"}]
uj5u.com熱心網友回復：
如果引數具有相同的屬性，它們將被覆寫。
如果你需要它們，你需要將它們存盤在一個陣列中
像這樣
const decorate = (data, parameters) => data.map(d => ({...d, parameters: parameters.filter(({id}) => d.id === id)}))
let API = [
{
actif: true,
id: 8,
creation_user: "David",
date_creation: "févr 4 2022 12:17PM",
description: "A description",
version: "v1r1"
},
{
actif: true,
id: 10,
creation_user: "Julien",
date_creation: "févr 10 2022 12:17PM",
description: "A description",
version: "v1r2"
},
{
actif: false,
id: 20,
creation_user: "Tom",
date_creation: "févr 10 2022 12:17PM",
description: "A description",
version: "v1r2"
}
]
let Parameters = [
{
id: 10,
name: "codeRR",
type: "string"
},
{
id: 20,
name: "codeAA",
type: "string"
},
{
id: 20,
name: "codeCC",
type: "string"
}
]
console.log(decorate(API,Parameters ))uj5u.com熱心網友回復：
您快到了。您可以添加額外的邏輯map來分別處理多個和單個引數。
let API = [{
actif: true,
id: 8,
creation_user: "David",
date_creation: "févr 4 2022 12:17PM",
description: "A description",
version: "v1r1"
},
{
actif: true,
id: 10,
creation_user: "Julien",
date_creation: "févr 10 2022 12:17PM",
description: "A description",
version: "v1r2"
},
{
actif: false,
id: 20,
creation_user: "Tom",
date_creation: "févr 10 2022 12:17PM",
description: "A description",
version: "v1r2"
}
]
let Parameters = [{
id: 10,
name: "codeRR",
type: "string"
},
{
id: 20,
name: "codeAA",
type: "string"
},
{
id: 20,
name: "codeCC",
type: "string"
}
]
const result = API.map((data) => {
const updatedData = Object.assign({}, data)
const foundParameters = Parameters.filter(({
id
}) => id === data.id)
if (foundParameters.length === 0) {
return data
}
if (foundParameters.length === 1) {
return Object.assign(updatedData, foundParameters[0])
} else {
return Object.assign(updatedData, {
parameter: foundParameters.map(({
name,
type
}) => ({
name,
type
}))
})
}
});
console.log(result)uj5u.com熱心網友回復：
使用Array.prototype.reduce
Parameters對陣列進行分組，這將給出一個物件，其中鍵是s，值是引數物件的陣列。idid遍歷
API陣列并使用上面創建的物件在parameter引數資訊可用的地方添加屬性。
let
API = [
{ actif: true, id: 8, creation_user: "David", date_creation: "févr 4 2022 12:17PM", description: "A description", version: "v1r1" },
{ actif: true, id: 10, creation_user: "Julien", date_creation: "févr 10 2022 12:17PM", description: "A description", version: "v1r2" },
{ actif: false, id: 20, creation_user: "Tom", date_creation: "févr 10 2022 12:17PM", description: "A description", version: "v1r2" },
],
Parameters = [
{ id: 10, name: "codeRR", type: "string" },
{ id: 20, name: "codeAA", type: "string" },
{ id: 20, name: "codeCC", type: "string" },
],
ParametersGroup = Parameters.reduce((r, p) => ((r[p.id] ??= []).push(p), r), {}),
APIWithParams = API.map((o) => ({
...o,
...(ParametersGroup[o.id] && { parameters: ParametersGroup[o.id] }),
}));
console.log(APIWithParams);如果你想對單個引數和多個引數進行不同的處理，請參考下面的解決方案：
顯示代碼片段
let
API = [
{ actif: true, id: 8, creation_user: "David", date_creation: "févr 4 2022 12:17PM", description: "A description", version: "v1r1" },
{ actif: true, id: 10, creation_user: "Julien", date_creation: "févr 10 2022 12:17PM", description: "A description", version: "v1r2" },
{ actif: false, id: 20, creation_user: "Tom", date_creation: "févr 10 2022 12:17PM", description: "A description", version: "v1r2" },
],
Parameters = [
{ id: 10, name: "codeRR", type: "string" },
{ id: 20, name: "codeAA", type: "string" },
{ id: 20, name: "codeCC", type: "string" },
],
ParametersGroup = Parameters.reduce((r, p) => ((r[p.id] ??= []).push(p), r), {}),
APIWithParams = API.map((o) => {
const paramsForId = ParametersGroup[o.id];
return {
...o,
...(paramsForId && (paramsForId.length > 1 ? { parameters: paramsForId } : paramsForId[0])),
};
});
console.log(APIWithParams);注意：id一次又一次地尋找引數并不是最優的。因此，我們預先創建了一個物件，并在添加引數資訊時參考它。
其他相關檔案：
- 空值合并運算子 (??)
- 逗號運算子 (,)
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/483341.html
標籤：javascript 数组 反应
上一篇：學習筆記