JS中物件陣列的分組問題

我有這樣的物件陣列：

[{id: 1, name: 'Apple', category: 'Fruit'}
{id: 2, name: 'Melon', category: 'Fruit'}
{id: 3, name: 'iPhone', category: 'Phone'}
{id: 4, name: 'Samsung Galaxy Note 8', category: 'Phone'}
{id: 5, name: 'Playstation 5', category: 'Entertainment'}]

我想要實作的是按類別組合產品名稱并將它們顯示為：

Fruit
  Apple
  Melon
Phone
  iPhone
  Samsung Galaxy Note 8
Entertainment
  Playstation 5

所以，我試圖實作的是

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

const products = [{id: 1, name: 'Apple', category: 'Fruit'}
    {id: 2, name: 'Melon', category: 'Fruit'}
    {id: 3, name: 'iPhone', category: 'Phone'}
    {id: 4, name: 'Samsung Galaxy Note 8', category: 'Phone'}
    {id: 5, name: 'Playstation 5', category: 'Entertainment'}]

console.log(groupBy([products], 'category'));

uj5u.com熱心網友回復：

你必須稍微調整你的減少：

const mapping = arr.reduce((obj, entry) => {
obj[entry.category] = obj[entry.category] ? [...obj[entry.category], entry] : [entry]
return obj;
}, {})

導致

{
  Entertainment: [{
  category: "Entertainment",
  id: 5,
  name: "Playstation 5"
}],
  Fruit: [{
  category: "Fruit",
  id: 1,
  name: "Apple"
}, {
  category: "Fruit",
  id: 2,
  name: "Melon"
}],
  Phone: [{
  category: "Phone",
  id: 3,
  name: "iPhone"
}, {
  category: "Phone",
  id: 4,
  name: "Samsung Galaxy Note 8"
}]
}

您可以通過將條目更改為所需的條目值來調整要保存的內容。

uj5u.com熱心網友回復：

我會groupBy像這樣處理你的方法：

function groupBy(data, key, value) {
    const groups = {};
    data.forEach(element => {
        let subkey = element[key];
        if (!(subkey in groups)) {
            groups[subkey] = [element[value]];
        } else {
            groups[subkey].push(element[value]);
        }
    });

    return groups;
}

console.log(groupBy(products, "category", "name")

你遍歷每個元素，如果指定的鍵不在組物件中，它將被添加。如果已經添加，我們只需將新元素添加到陣列中。

這是 groupBy 函式的回傳值示例：

{
  Fruit: [ 'Apple', 'Melon' ],
  Phone: [ 'iPhone', 'Samsung Galaxy Note 8' ],
  Entertainment: [ 'Playstation 5' ]
}

uj5u.com熱心網友回復：

生成 HTML 代碼

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

const products = [{id: 1, name: 'Apple', category: 'Fruit'},
{id: 2, name: 'Melon', category: 'Fruit'},
{id: 3, name: 'iPhone', category: 'Phone'},
{id: 4, name: 'Samsung Galaxy Note 8', category: 'Phone'},
{id: 5, name: 'Playstation 5', category: 'Entertainment'}];

const groups = groupBy(products, 'category');
const html = Object.keys(groups).reduce((code, cat) => {
  const inner = groups[cat].reduce((i, product) => {
    return i   `<p>${product.name}</p>`;
  }, '');
  return code   `<div><h2>${cat}</h2>${inner}</div>`;
}, '');

document.getElementById('container').innerHTML = html;

p { margin-left: 20px; }

<div id="container"></div>

uj5u.com熱心網友回復：

var groupBy = function (xs, key) {
       return xs.reduce(function (rv, x) {

           (rv[x[key]] = rv[x[key]] || []).push(x);
           return rv;
       }, {});
   };

   const arrayData = [
       { id: 1, name: 'Apple', category: 'Fruit' },
       { id: 2, name: 'Melon', category: 'Fruit' },
       { id: 3, name: 'iPhone', category: 'Phone' },
       { id: 4, name: 'Samsung Galaxy Note 8', category: 'Phone' },
       { id: 5, name: 'Playstation 5', category: 'Entertainment' }
   ]
   console.log(groupBy(arrayData, 'category'));

結果：

{
    "Fruit": [
        {
            "id": 1,
            "name": "Apple",
            "category": "Fruit"
        },
        {
            "id": 2,
            "name": "Melon",
            "category": "Fruit"
        }
    ],
    "Phone": [
        {
            "id": 3,
            "name": "iPhone",
            "category": "Phone"
        },
        {
            "id": 4,
            "name": "Samsung Galaxy Note 8",
            "category": "Phone"
        }
    ],
    "Entertainment": [
        {
            "id": 5,
            "name": "Playstation 5",
            "category": "Entertainment"
        }
    ]
}

標籤：javascript 反应

上一篇：如何使用localStorage使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？

下一篇：使用behaviorSubject的服務回傳[object][object]