iT邦幫忙

0

[JS]兩組不同JSON中合併特定JSON對象(新增問題:若三組以上不同)

  • 分享至 

  • xImage

我有兩組JSON值,裡面Year與Subject相同,最後Value值不同,但我想將兩組合併成一組(如圖)

//JSON 1
[{"Year":"2021","Subject":"SG","CountValue":"1498"},{"Year":"2021","Subject":"TW","CountValue":"8906"}]


//JSON 2
[{"Year":"2021","Subject":"SG","ApplicationValue":"1299"},{"Year":"2021","Subject":"TW","ApplicationValue":"7542"}]


//想合併成這樣
[{"Year":"2021","Subject":"SG","CountValue":"1498","ApplicationValue":"1299"},{"Year":"2021","Subject":"TW","CountValue":"8906","ApplicationValue":"7542"}]

我在查資料時,在這個網址有看到類似的資訊
https://stackoverflow.com/questions/47564159/merging-the-same-specific-json-object-in-two-different-json-arrays

本想著依樣畫葫蘆應該就可以解決,但最後顯示的確不是我想呈現的樣子,想請問該往哪個方向撰寫比較建議呢?
另外,嘗試解讀let result這段但還是不太清楚,想問一下這段大概在做甚麼呢?

//嘗試依樣畫葫蘆的語法

let allProducts = [
	[{"Year":"2021","Subject":"SG","CountValue":"1498"},{"Year":"2021","Subject":"TW","CountValue":"8906"}] 
];

let allLocations = [
	[{"Year":"2021","Subject":"SG","ApplicationValue":"1299"},{"Year":"2021","Subject":"TW","ApplicationValue":"7542"}] 
]

let result = allProducts.map((product) => {
  let matchingLocation = allLocations.find((location) => {
    return location.Subject == product.Subject;
  });
  return Object.assign(product, matchingLocation);
})

console.log(result);
//撈出的資料
[[{
  ApplicationValue: "1299",
  Subject: "SG",
  Year: "2021"
}, {
  ApplicationValue: "7542",
  Subject: "TW",
  Year: "2021"
}]]

更新:
若今天我有三個以上的組合要合併,應該怎麼撰寫比較好呢?

//嘗試依樣畫葫蘆的語法

let allProducts = [
	[{"Year":"2021","Subject":"SG","CountValue":"1498"},{"Year":"2021","Subject":"TW","CountValue":"8906"}] 
];

let allLocations = [
	[{"Year":"2021","Subject":"SG","ApplicationValue":"1299"},{"Year":"2021","Subject":"TW","ApplicationValue":"7542"}] 
]

//新增一組
let AA = [
	[{"Year":"2021","Subject":"SG","AAValue":"222"},{"Year":"2021","Subject":"TW","AAValue":"333"}] 
]


let result = allProducts.map((product) => {
  let matchingLocation = allLocations.find((location) => {
    return location.Subject == product.Subject;
  });
  return Object.assign(product, matchingLocation);
})

console.log(result);

感謝各位QQ

hokou iT邦好手 1 級 ‧ 2021-10-15 13:51:16 檢舉
有試著修改內容了
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
hokou
iT邦好手 1 級 ‧ 2021-10-15 10:56:43
最佳解答

剛試看了一下,你的陣列有 2 層,改成 1 層似乎就可以了

// 二層陣列
let allProducts = [[]];

let allLocations = [[]];

// 修改成一層陣列
let allProducts = [];

let allLocations = [];

用 find 找到 Subject 相同值的陣列位置,然後將 2 者用 Object.assign 複製
相同的 key 會被後來的蓋過,新的會增加,所以得到新的物件
map 回傳這個新物件組合的陣列結果

(感覺很厲害的寫法!)

== 更新
多一組類似這樣?

let allProducts = [
	{"Year":"2021","Subject":"SG","CountValue":"1498"},{"Year":"2021","Subject":"TW","CountValue":"8906"} 
];

let allLocations = [
	{"Year":"2021","Subject":"SG","ApplicationValue":"1299"},{"Year":"2021","Subject":"TW","ApplicationValue":"7542"}
];

//新增一組
let AA = [
	{"Year":"2021","Subject":"SG","AAValue":"222"},{"Year":"2021","Subject":"TW","AAValue":"333"}
];


let result = allProducts.map((product) => {
  let matchingLocation1 = allLocations.find((location) => {
    return location.Subject == product.Subject;
  });
  let matchingLocation2 = AA.find((location) => {
    return location.Subject == product.Subject;
  });
  return Object.assign(product, matchingLocation1, matchingLocation2);
})

console.log(result);
/*
[
    {
        "Year": "2021",
        "Subject": "SG",
        "CountValue": "1498",
        "ApplicationValue": "1299",
        "AAValue": "222"
    },
    {
        "Year": "2021",
        "Subject": "TW",
        "CountValue": "8906",
        "ApplicationValue": "7542",
        "AAValue": "333"
    }
]
*/
看更多先前的回應...收起先前的回應...
希希寶 iT邦新手 4 級 ‧ 2021-10-15 14:09:21 檢舉

是的,太感謝你了QQ
原來在嘗試多組合併的時候我把matchingLocation2的位置放錯了...

hokou iT邦好手 1 級 ‧ 2021-10-15 14:19:28 檢舉

/images/emoticon/emoticon12.gif

補充一下懶人的寫法,邏輯一樣,差在使用展開運算子展開物件

const result = allProducts.map((el) => ({
  ...el,
  ...allLocations.find((location) => location.Subject === el.Subject),
  ...AA.find((a) => a.Subject === el.Subject)
}))
hokou iT邦好手 1 級 ‧ 2021-10-15 14:46:47 檢舉

listennn08
感覺很厲害,我再研究看看

自己做紀錄
其餘參數(rest parameter):https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters

1
rskerz
iT邦新手 5 級 ‧ 2021-10-15 10:59:46

看起來是多了一個[],你試試看把allProducts跟allLocations的外層[]拿掉

let allProducts = 
	[{"Year":"2021","Subject":"SG","CountValue":"1498"},{"Year":"2021","Subject":"TW","CountValue":"8906"}];

let allLocations = 
	[{"Year":"2021","Subject":"SG","ApplicationValue":"1299"},{"Year":"2021","Subject":"TW","ApplicationValue":"7542"}] ;

這樣應該就可以了

希希寶 iT邦新手 4 級 ‧ 2021-10-15 14:09:44 檢舉

謝謝你,成功了!!!

我要發表回答

立即登入回答