ネストされたオブジェクトの配列をネストされた値で複数の配列にグループ化する方法

KVNA

配列を値(この場合は)で新しい配列のセットに変換しようとしていますid

入力

let array = [
  {"item": {"id": 111, "name": "item1"}, "qty": 1}, 
  {"item": {"id": 222, "name": "item2"}, "qty": 2},
  {"item": {"id": 222, "name": "item3"}, "qty": 3}
];

必要な出力

let newArray = [
  [{"item": {"id": 111, "name": "item1"}, "qty": 1}], 
  [{"item": {"id": 222, "name": "item2"}, "qty": 2},
   {"item": {"id": 222, "name": "item3"}, "qty": 3}]
];

標準groupBy関数を使用して、でソートされた2つの配列を返すことができますid

function groupItemBy(array, property) {
  var hash = {};
  for (var i = 0; i < array.length; i++) {
    if (!hash[array[i][property]]) hash[array[i][property]] = [];
    hash[array[i][property]].push(array[i]);
  }
  return hash;
}

ただし、これらを新しい配列にマップしようとすると、ネストされたqtyデータは失われます。

function parse() {
  let tmp = Object.values(groupItemBy(array.map(el => el.item), "id"));

  tmp.forEach(item => {
    console.log(item);
    // do something with each item in array
  })
}

実際の出力

let newArray = [
  [{{"id": 111, "name": "item1"}], 
  [{"id": 222, "name": "item2"},
   {"id": 222, "name": "item3"}]
];

元の配列をソートされた配列の配列にグループ化するときに、関連するデータの整合性をどのように維持できますか?

トリンコット

これが機能するためには、キープロパティがどこにあるかを関数に何らかの方法で伝える必要があります。非常に複雑なネストされたオブジェクトを想像することができ、いくつかは同じプロパティ名を持っている可能性があるため、そのような指定がない場合はあいまいになる可能性さえあります。

これに取り組む1つの方法は、関数にドットで区切られたプロパティ(1つの文字列内)を認識させることです。これは一種の「パス」です。あなたの場合、それはですitem.idその情報を使用して、関数はid(ネストされたオブジェクト内のitemを探す場所を知ることができます

明らかに、関数はその文字列をそれらのドットで分割します。次にreduce、結果のプロパティ名の配列に対してを実行して、配列内の各オブジェクトのキー値を見つけることができます。

これがどのように見えるかです:

let cart = [{"item": {"id": 111,"name": "item1", }, "qty": 10,}, {"item": {"id": 222,"name": "item2"},"qty": 1}, {"item": {"id": 222,"name": "item3"},"qty": 1,}];

function groupItemBy(array, property) {
    var hash = {},
        props = property.split('.');
    for (var i = 0; i < array.length; i++) {
        var key = props.reduce(function(acc, prop) {
            return acc && acc[prop];
        }, array[i]);
        if (!hash[key]) hash[key] = [];
        hash[key].push(array[i]);
    }
    return hash;
}

let grouped = Object.values(groupItemBy(cart, 'item.id'));
console.log(grouped);
.as-console-wrapper { max-height: 100% !important; top: 0; }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

オブジェクトの配列をネストされた配列グループに変換する方法

分類Dev

配列内の配列のネストされた子オブジェクトによってオブジェクトをグループ化する方法

分類Dev

ネストされた配列のオブジェクトの要素でグループ化する方法

分類Dev

オブジェクトのネストされた配列をグループ化する

分類Dev

オブジェクトの他の配列を指すオブジェクトのネストされた配列を再帰的にループする方法は?

分類Dev

オブジェクト値のネストされた配列でオブジェクトの配列をフィルタリングする

分類Dev

ネストされた配列内のオブジェクトの値で配列を並べ替える方法

分類Dev

ネストされたJavaScriptオブジェクトの値にキーパスの配列を返す方法は?

分類Dev

配列オブジェクトのネストされた配列の条件でWhileループを使用するにはどうすればよいですか?

分類Dev

オブジェクトのネストされた配列で$ lookupする方法

分類Dev

ネストされたオブジェクトをオブジェクトの配列に分割する方法-forループを回避する

分類Dev

値の配列でオブジェクト配列のネストされた配列をフィルタリングする

分類Dev

ネストされた配列に基づいてオブジェクトの配列を再グループ化します

分類Dev

複数の基準でネストされた配列からオブジェクトを削除する

分類Dev

Reactでネストされた配列のネストされたオブジェクトを更新する

分類Dev

JSONオブジェクトをJSONB列のネストされた配列にプッシュする方法

分類Dev

ネストされたオブジェクト配列値を別の配列に取得する

分類Dev

他の配列に基づいてネストされた配列を持つオブジェクトの配列をフィルタリングする方法

分類Dev

キーによるネストされたオブジェクトのlodashグループ配列

分類Dev

ネストされた値に基づく配列でオブジェクトの配列をフィルタリングする

分類Dev

vue 2 でオブジェクトの配列とネストされたオブジェクトをループする方法

分類Dev

マングーススキーマの配列にネストされたオブジェクトのデフォルト値を設定する

分類Dev

複数の配列およびオブジェクト内にネストされたオブジェクトのforEachを表示する方法

分類Dev

jqueryを使用してJavaScriptでネストされた配列オブジェクトをループする方法

分類Dev

オブジェクトの配列内にネストされた配列をsetStateする方法

分類Dev

プレーン配列を親オブジェクトにネストされたネストされたオブジェクトに変換する方法

分類Dev

配列オブジェクトのネストされた配列からデータを取得する方法

分類Dev

mongodbのネストされた配列オブジェクトの巻き戻しとグループ化

分類Dev

ネストされたJsonをフェッチし、Reactでオブジェクトの配列にする方法

Related 関連記事

  1. 1

    オブジェクトの配列をネストされた配列グループに変換する方法

  2. 2

    配列内の配列のネストされた子オブジェクトによってオブジェクトをグループ化する方法

  3. 3

    ネストされた配列のオブジェクトの要素でグループ化する方法

  4. 4

    オブジェクトのネストされた配列をグループ化する

  5. 5

    オブジェクトの他の配列を指すオブジェクトのネストされた配列を再帰的にループする方法は?

  6. 6

    オブジェクト値のネストされた配列でオブジェクトの配列をフィルタリングする

  7. 7

    ネストされた配列内のオブジェクトの値で配列を並べ替える方法

  8. 8

    ネストされたJavaScriptオブジェクトの値にキーパスの配列を返す方法は?

  9. 9

    配列オブジェクトのネストされた配列の条件でWhileループを使用するにはどうすればよいですか?

  10. 10

    オブジェクトのネストされた配列で$ lookupする方法

  11. 11

    ネストされたオブジェクトをオブジェクトの配列に分割する方法-forループを回避する

  12. 12

    値の配列でオブジェクト配列のネストされた配列をフィルタリングする

  13. 13

    ネストされた配列に基づいてオブジェクトの配列を再グループ化します

  14. 14

    複数の基準でネストされた配列からオブジェクトを削除する

  15. 15

    Reactでネストされた配列のネストされたオブジェクトを更新する

  16. 16

    JSONオブジェクトをJSONB列のネストされた配列にプッシュする方法

  17. 17

    ネストされたオブジェクト配列値を別の配列に取得する

  18. 18

    他の配列に基づいてネストされた配列を持つオブジェクトの配列をフィルタリングする方法

  19. 19

    キーによるネストされたオブジェクトのlodashグループ配列

  20. 20

    ネストされた値に基づく配列でオブジェクトの配列をフィルタリングする

  21. 21

    vue 2 でオブジェクトの配列とネストされたオブジェクトをループする方法

  22. 22

    マングーススキーマの配列にネストされたオブジェクトのデフォルト値を設定する

  23. 23

    複数の配列およびオブジェクト内にネストされたオブジェクトのforEachを表示する方法

  24. 24

    jqueryを使用してJavaScriptでネストされた配列オブジェクトをループする方法

  25. 25

    オブジェクトの配列内にネストされた配列をsetStateする方法

  26. 26

    プレーン配列を親オブジェクトにネストされたネストされたオブジェクトに変換する方法

  27. 27

    配列オブジェクトのネストされた配列からデータを取得する方法

  28. 28

    mongodbのネストされた配列オブジェクトの巻き戻しとグループ化

  29. 29

    ネストされたJsonをフェッチし、Reactでオブジェクトの配列にする方法

ホットタグ

アーカイブ