如何根據屬性值從單個物件陣列創建多個物件陣列

如果我有像這樣的物件陣列，我想按屬性值對其進行分組

    const unitsPhotos = [{
    fieldname: 'unit_1',
    name: 'Photo 1',
    size: 324
  },
  {
    fieldname: 'unit_2',
    name: 'Photo 11',
    size: 321
  },
  {
    fieldname: 'unit_1',
    name: 'Photo 41',
    size: 541
  },
  {
    fieldname: 'unit_2',
    name: 'Photo 14',
    size: 123
  },
  {
    fieldname: 'unit_3',
    name: 'Photo 144',
    size: 1223
  }
  ];

如何基于欄位名（或包含這些物件陣列的單個陣列）創建三個新的單獨物件陣列，如下所示

const groupedArray = [
  [{
      fieldname: 'unit_1',
      name: 'Photo 1',
      size: 324
    },
    {
      fieldname: 'unit_1',
      name: 'Photo 132',
      size: 325
    }],
  [{
      fieldname: 'unit_2',
      name: 'Photo 11',
      size: 321
    },
    {
      fieldname: 'unit_2',
      name: 'Photo 14',
      size: 123
    }],
  [{
    fieldname: 'unit_3',
    name: 'Photo 144',
    size: 1223
  }]];

uj5u.com熱心網友回復：

您可以首先使陣列唯一，然后將它們推送到 groupedArray，如下所示：

 const unitsPhotos = [{
    fieldname: 'unit_1',
    name: 'Photo 1',
    size: 324
  },
  {
    fieldname: 'unit_2',
    name: 'Photo 11',
    size: 321
  },
  {
    fieldname: 'unit_1',
    name: 'Photo 41',
    size: 541
  },
  {
    fieldname: 'unit_2',
    name: 'Photo 14',
    size: 123
  },
  {
    fieldname: 'unit_3',
    name: 'Photo 144',
    size: 1223
  }
  ];
  
const unitsPhotosArr = unitsPhotos.map(item => item.fieldname)
// you can find uniques with this function
const toFindUniques = arry => arry.filter((item, index) => arry.indexOf(item) === index)
const uniques = toFindUniques(unitsPhotosArr);
const groupedArray = [];
for (const element of uniques) {
  const item = unitsPhotos.filter(el => el.fieldname === element);
  groupedArray.push(item)
}

uj5u.com熱心網友回復：

有許多不同的方法可以解決這個問題，盡管我建議使用Array.prototype.reduce以避免在不必要時多次迭代串列。為此，我創建了一個物件，然后將每個專案推入欄位名稱的鍵中，如果不存在則創建陣列。這是代碼：

const unitsPhotos = [{
    fieldname: 'unit_1',
    name: 'Photo 1',
    size: 324
  },
  {
    fieldname: 'unit_2',
    name: 'Photo 11',
    size: 321
  },
  {
    fieldname: 'unit_1',
    name: 'Photo 41',
    size: 541
  },
  {
    fieldname: 'unit_2',
    name: 'Photo 14',
    size: 123
  },
  {
    fieldname: 'unit_3',
    name: 'Photo 144',
    size: 1223
  }
];

function groupPhotos(photos) {
    return Object.values(photos.reduce((acc, cur) => {
        acc[cur.fieldname] ??= [];
        acc[cur.fieldname].push(cur);
        return acc;
    }, {}));
}

console.log(groupPhotos(unitsPhotos));

TypeScript Playground 鏈接

uj5u.com熱心網友回復：

此示例要從多個陣列創建物件陣列，請嘗試對現有代碼執行以下操作。

var ids = [1,2,3]; //Hundreds of elements here
var names = ["john","doe","foo"]; //Hundreds of elements here
var countries = ["AU","USA","USA"]; //Hundreds of elements here

// Create the object array
var items = ids.map((id, index) => {
  return {
    id: id,
    name: names[index],
    country: countries[index]
  }
});

// Result
var items = [
    {id: 1, name: "john", country: "AU"},
    {id: 2, name: "doe", country: "USA"},
    ...
];

uj5u.com熱心網友回復：

用于Array#reduce()產生一個物件：

const unitsPhotos = [{fieldname: 'unit_1', name: 'Photo 1', size: 324 }, { fieldname: 'unit_2',
    name: 'Photo 11', size: 321 }, { fieldname: 'unit_1', name: 'Photo 41', size: 541 }, { fieldname: 'unit_2', name: 'Photo 14', size: 123 }, { fieldname: 'unit_3', name: 'Photo 144', size: 1223 }];
    
const groupedArray = unitsPhotos.reduce((prev, cur) => 
    ({...prev,[cur.fieldname]:(prev[cur.fieldname] || []).concat(cur)}),{}
);

console.log( groupedArray );
//You can leave it as an object OR 
//if it has to be an array use Object.values()

//Like so: Output is same as your desired output.
console.log( Object.values(groupedArray) );
/*OUTPUT:
[
  [
    {
      "fieldname": "unit_1",
      "name": "Photo 1",
      "size": 324
    },
    {
      "fieldname": "unit_1",
      "name": "Photo 41",
      "size": 541
    }
  ],
  [
    {
      "fieldname": "unit_2",
      "name": "Photo 11",
      "size": 321
    },
    {
      "fieldname": "unit_2",
      "name": "Photo 14",
      "size": 123
    }
  ],
  [
    {
      "fieldname": "unit_3",
      "name": "Photo 144",
      "size": 1223
    }
  ]
]
*/

標籤：javascript 数组 目的

上一篇：從其他物件向物件添加新屬性

下一篇：我的代碼顯示ValueError:Noobjectstoconcatenate