JavaScriptで2つの配列を比較し、同じ構造の配列を見つけて取得する方法

Question

前提

JavaScriptで2つの配列を比較し、同じ構造の配列を見つけて取得する方法が知りたいです

以下に例を挙げます。

2つ配列があります。

配列1

[
  {
    name :  "色",
    value : "赤"
  }, 
  {
    name :  "個数",
    value : "30個"
  }
]

配列2

[
  {
    id: 1
    selectedOptions : [
        {
            name :  "色",
            value : "赤"
        },
        {
            name :  "個数",
            value : "10個"
        },
    ]
  }, 
  {
    id: 2
    selectedOptions : [
        {
            name :  "色",
            value : "赤"
        },
        {
            name :  "個数",
            value : "20個"
        },
    ]
  }, 
  {
    id: 3
    selectedOptions : [
        {
            name :  "色",
            value : "赤"
        },
        {
            name :  "個数",
            value : "30個"
        },
    ]
  }, 
  {
    id: 4
    selectedOptions : [
        {
            name :  "色",
            value : "黒"
        },
        {
            name :  "個数",
            value : "10個"
        },
    ]
  }, 
 .....
]

実現したいこと

配列1の構造と同じ構造をもつものを、配列2のselectedOptionsから探し出し、合致する配列2のidを取得したいです。
上の例だと、色が赤で個数が30個なので、id:3が取得できればいいです。

試したこと

JSON.stringifyを利用して配列を文字列化して比較する方法をやりましたが、順番変わった場合に必ず合致したい可能性があると思い他の方法を探しています。

Comments

[otn]

全部同じ構造ですね。構造じゃなくて「色の値が等しい」という中身の話に見えますが、そういうことですか？

Answer 1

順番変わった場合に必ず合致したい可能性がある

など、今後の仕様変更に対応することを考慮すると以下の2つの判定を行う関数を作っておくのがよいかと思います。

1. ある配列がオプションとして妥当な型(Shape)を持っている。
2. 二つの配列がともにオプションであり、かつ内容が等しい。

以下はこれらの関数のサンプルですが、ご自身の要件に合わせて適宜修正（条件を緩めたり、追加したり）してください。

1. ある配列がオプションとして妥当な型(Shape)を持っている。

与えられた引数 opt が以下の条件をすべて満たすとき true を返し、そうでない場合は false を返す関数 isOptionsを作ります。

• opt は配列であり、かつ長さが2である。
• opt の2つの要素はともに以下を満たすオブジェクトである。
  • 2つのプロパティ name と value を持ち、これらはともに値は文字列である。

ざっくりですがこんな感じのものです：

const isOptions = opt => (
  Array.isArray(opt) && 
  opt.length === 2 &&
  opt.every(
    e => (
      Object.keys(e).length === 2 && 
      [e.name, e.value].every(v => typeof v === 'string')
    )
  )
);

2. 二つの配列がともにオプションであり、内容が等しい。

与えられた引数 opt1 と opt2 がともにオプションでありかつ内容が等しい場合に true を返し、そうでない場合は false を返す関数 optionsEqual を作成します。

const optionsEqual = (opt1, opt2) => (
  [opt1, opt2].every(isOptions)
  && 
  opt1.every(
    (e, i) => ['name', 'value'].every(prop => e[prop] === opt2[i][prop])
  )
);

上記のような2つの関数を作っておくと、質問にある配列1をarr1 、配列2を arr2 として、以下によって最初にマッチしたオブジェクトのidである 3 が得られます。

const matchObjId = arr2.find(({ selectedOptions: opt }) => optionsEqual(arr1, opt))?.id;  
console.log(matchObjId);  // => 3

• codepen: https://codepen.io/alphabeta12/pen/PoBpjWZ?editors=0012

Answer 2

順番変わった場合に必ず合致したい可能性がある

の意味がわかりませんが、

const a=[
  {name:"色",value:"赤"},
  {name:"個数",value:"30個"}
];

const b=[
  {
  id:1,
  selectedOptions:[
    {name:"色",value:"赤"},
    {name:"個数",value:"10個"},
    ],
  },
  {
  id:2,
  selectedOptions:[
    {name:"色",value:"赤"},
    {name:"個数",value:"20個"},
    ],
  },
  {
  id:3,
  selectedOptions:[
    {name:"色",value:"赤"},
    {name:"個数",value:"30個"},
    ],
  },
  {
  id:4,
  selectedOptions:[
    {name:"色",value:"黒"},
    {name:"個数",value:"10個"},
    ],
  },
  ];
const c=b.filter(x=>JSON.stringify(x.selectedOptions)==JSON.stringify(a)).map(x=>x.id);
console.log(c);

JSON.stringifyで合致しない具体的な例をあげていただければ調整します

Comments

[yambejp]

もし仮に以下のようなものを合致させたいとするなら
{
id:5,
selectedOptions:[
{name:"個数",value:"30個"},
{name:"色",value:"赤"},
],
}
のようなデータは配列として順番が違うので合致させないべきですが、どうしてもというならソートをかければ同じ順に並ぶので対応できそうです

[yusuke1]

ソートかればいけそうですね。ありがとうございます。