JavaScriptでオブジェクトが含まれる2つの配列を結合したい

Question

前提・実現したいこと

JavaScriptでオブジェクトが含まれる配列の結合をしたいです。
reduceやmapなどいろいろ試したのですが期待する結果が得られなかったため教えていただけますと幸いです。

該当のソースコード

obj1 =  [{ "number": 1, "shop_id": 100, "sales": 1000 },{ "number": 2, "shop_id": 200, "sales": 2000 },
         { "number": 3, "shop_id": 100, "sales": 1111 },{ "number": 4, "shop_id": 300, "sales": 2222 },
         { "number": 5, "shop_id": 100, "sales": 3333 },{ "number": 6, "shop_id": 500, "sales": 4444 }]



obj2 =  [{ "shop_id": 100, "name": "服屋" , "店長": "佐藤" },{ "shop_id": 200, "name": "花屋" , "店長": "田中" },
         { "shop_id": 300, "name": "薬局" , "店長": "川村" },{ "shop_id": 400, "name": "カフェ" , "店長": "白石" },
         { "shop_id": 500, "name": "居酒屋" , "店長": "北山" }]



//期待値
obj1のshop_idをobj2のshop_idと紐づけて連結させたい。
obj1に存在しないshop_id（今回の例だとshop_id=400）の情報は不要。

obj3 = [ { "shop_id": 100, "name": "服屋" , "店長": "佐藤" , "number":[ 1, 3, 5],  "sales": [1000, 1111, 3333] },
         { "shop_id": 200, "name": "花屋" , "店長": "田中" , "number": 2 ,  "sales": 2000 },
         { "shop_id": 300, "name": "薬局" , "店長": "川村" , "number": 4 ,  "sales": 2222},
         { "shop_id": 500, "name": "居酒屋" , "店長": "北山" , "number": 6 ,  "sales": 4444}]

Answer 1

こんな感じでいけるかと思います。

const obj3 = obj2.map(shop => {  
  const records = obj1.filter(({ shop_id }) => shop_id === shop.shop_id);
  if (records.length > 0) {
    const number = records.map(r => r.number);
    const sales = records.map(r => r.sales);
    return {
      ...shop,
      number: number.length === 1 ? number[0] : number,
      sales: sales.length === 1 ? sales[0] : sales
    }
  }   
  return null;    
})
.filter(e => e);

• サンプル ???? tera: 372745@codepen

Comments

[void_wr]

ありがとうございます！
const records = obj1.filter(({ shop_id }) => shop_id === shop.shop_id);
上記のshop_idはそれぞれobj1とobj2のどちらを指しているか教えていただけますと幸いです。

[退会済みユーザー]

コメントありがとうございます。

const records = obj1.filter(({ shop_id }) => shop_id === shop.shop_id);

の行に

shop_id === shop.shop_id

という比較があります。この(厳密な)等価演算子 === の (1) 左辺と(2)右辺について説明します。

(1)左辺

左辺の

shop_id

は、obj1の要素のshop_id です。obj1の各要素が、filter に渡している関数の引数に入ってきて、
{ shop_id }　によって分割代入されたものです。

(2)右辺

右辺の

shop.shop_id

は、obj2の要素のshop_id です。

const obj3 = obj2.map(shop => {

としている部分で、mapに渡している関数の引数 shop に obj2 の各要素が渡されてきますが、この shop のshop_idになります。

[退会済みユーザー]

一点補足です。

const records = obj1.filter(({ shop_id }) => shop_id === shop.shop_id);

とあるように、obj1 をfilterした結果を

records

という変数名にしましたが、これは「売上の記録」というつもりでした。しかし、sales の record というのは「売上の最高記録を更新した。」といったような、別の意味合いでの「記録」になってしまうので、

const salesData = obj1.filter(({ shop_id }) => shop_id === shop.shop_id);

だったりのほうがよいかもしれません。
あるいはobj1のデータの元になっているのがデータベースだったらそのテーブル名に合わせることも考えられます。そのあたりは適宜、ご自身で調整されてください。

[void_wr]

ご丁寧にありがとうございます！
無事実装することができました。