web-dev-qa-db-ja.com

ES6-ネストされた配列内のデータの検索

findまたはfilterを使用するES6では、値を使用して配列内の要素を見つけるために繰り返し処理することに非常に満足しています。

ただし、ネストされた配列の値に基づいて親配列から値を取得しようとしています。

たとえば、次のデータ構造では：

products: [
  {
    id: 01,
    items: [
      {
        id: 01,
        name: 'Apple'
      },
      {
        id: 02,
        name: 'banana'
      },
      {
        id: 03,
        name: 'orange'
      }
    ]
  },
  {
    id: 02,
    items: [
      {
        id: 01,
        name: 'carrot'
      },
      {
        id: 02,
        name: 'lettuce'
      },
      {
        id: 03,
        name: 'peas'
      }
    ]
  },
  {
    id: 03,
    items: [
      {
        id: 01,
        name: 'eggs'
      },
      {
        id: 02,
        name: 'bread'
      },
      {
        id: 03,
        name: 'milk'
      }
    ]
  }
]

オブジェクトnameのidまたはmilkを知っている場合、それがネストされている要素のIDを見つける方法はありますか？

現在、私はこれを持っています：

products.find((product) => {
  product.find((prod) => {
    return prod.name === 'milk';
  });
});

milkを含むオブジェクトのみを返します。

javascriptarraysecmascript-6
14
Toby

外側のfindのコールバックから何かを返さなければなりません。実際、内部の繰り返しにはfindを使用するのではなく、条件に一致する要素が配列内に存在するかどうかのブール値を返す some を使用する必要があります。

products.find((product) => {
  return product.items.some((item) => {
//^^^^^^
    return item.name === 'milk';
  });
});

または要するに：

products.find(product => product.items.some(item => item.name === 'milk'));

次に、findが（null！ではなく）何かを見つけたかどうかを確認し、その.id、結果は03。または、ミルクをアイテムとして含む製品のfilterを使用して、すべての結果をそれらのIDにマッピングできます。

products.filter(product =>
  product.items.some(item => item.name === 'milk');
).map(product =>
  product.id
) // [03]
36
Bergi