按屬性值顯示物件-有解無憂

我仍在學習 Javascript，我有資料并試圖按其類別顯示。我很困惑使用哪種方法來實作這一點。這是我的物件

const data = [
  {
     category: "sports",
     items: "shoes",
     price: 599,
  },
  {
     category: "electronics",
     items: "phones",
     price: 898,
  },
  {
     category: "sports",
     items: "shirt",
     price: 788,
  },
  {
     category: "sports",
     items: "ball",
     price: 455,
  },
  {
     category: "electronics",
     items: "laptop",
     price: 999,
  },
  {
     category: "beauty",
     items: "lipstick",
     price: 888,
  },
];

我想要的結果或多或少類似于下面的代碼片段。并感謝您的幫助。我希望你們能理解，因為我的英語不夠好。已編輯，資料是來自用戶輸入的動態資料

div{
  display: flex
}

section{
  border: 1px solid red
}

<section>
  <h1>electronics</h1>
  <div>
    <p>phones</p>
    <p>898</p>
  </div>
  <div>
    <p>laptop</p>
    <p>999</p>
  </div>
</section>

<section>
  <h1>sports</h1>
  <div>
    <p>shoes</p>
    <p>599</p>
  </div>
  <div>
    <p>shirt</p>
    <p>788</p>
  </div>
  <div>
    <p>ball</p>
    <p>455</p>
  </div>
</section>

<section>
  <h1>beauty</h1>
  <div>
    <p>lipstick</p>
    <p>888</p>
  </div>
</section>

uj5u.com熱心網友回復：

使用由產品名稱和價格組成的物件組成的陣列的值創建一個類別物件，最后只需遍歷物件的鍵并進行 DOM 操作，

const data = [
  {
    category: "sports",
    items: "shoes",
    price: 599,
  },
  {
    category: "electronics",
    items: "phones",
    price: 898,
  },
];

const categorys = {};
data.forEach((product) => {
  let category = product.category;
  if (!categorys[category]) categorys[category] = [];
  categorys[category].push(product);
});

for (category in categorys) {
  console.log(categorys[category]);
  //do dom manipulation here,
  //the best thing to do would be to create the element
  //and update the dom just once after the loop ends
}

uj5u.com熱心網友回復：

你可以做這樣的事情。

基本上，這個想法是將您的陣列轉換為這種形式的物件

{
  "category1": [{}, {}] //item with category1,
  "category2": [{}, {}] //item with category2,
}

語法

return {
   ...res,
   [item.category]: [...(res[item.category] || []), item]
  }

意味著它回傳物件中所有先前的類別（...res）

對于當前類別，它采用該類別中的所有專案 (res[item.category]) 或空陣列（如果未定義）并設定一個包含先前值加上當前值的新陣列

const data = [
  {
     category: "sports",
     items: "shoes",
     price: 599,
  },
  {
     category: "electronics",
     items: "phones",
     price: 898,
  },
  {
     category: "sports",
     items: "shirt",
     price: 788,
  },
  {
     category: "sports",
     items: "ball",
     price: 455,
  },
  {
     category: "electronics",
     items: "laptop",
     price: 999,
  },
  {
     category: "beauty",
     items: "lipstick",
     price: 888,
  },
];

//first group by category
const grouppedByCategory = data.reduce((res, item) => {
  
  return {
   ...res,
   [item.category]: [...(res[item.category] || []), item]
  }

}, {})


//then transform your groupped elements into html
const html = Object.entries(grouppedByCategory).map(([cat, products]) => `<section>
  <h1>${cat}</h1>
  ${products.map(({price, items}) => `<div>
    <p>${items}</p>
    <p>${price}</p>
  </div>`).join('') }
</section>`).join('')

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

div{
  display: flex
}

section{
  border: 1px solid red
}

<main id="container"></main>

uj5u.com熱心網友回復：

這是一個簡單的示例，說明如何使用您想要使用的值創建一個新陣列array.filter()

const data = [
  {
     category: "sports",
     items: "shoes",
     price: 599,
  },
  {
     category: "electronics",
     items: "phones",
     price: 898,
  },
  {
     category: "sports",
     items: "shirt",
     price: 788,
  },
  {
     category: "sports",
     items: "ball",
     price: 455,
  },
  {
     category: "electronics",
     items: "laptop",
     price: 999,
  },
  {
     category: "beauty",
     items: "lipstick",
     price: 888,
  },
];
function compare( a, b ) {
  if ( a.category < b.category ){
    return 1;
  }
  if ( a.category > b.category ){
    return -1;
  }
  return 0;
}

console.log(data.sort( compare ));

在這里，我按每個類別進行過濾，然后將其推送到一個新陣列以獲得我想要的結果。

uj5u.com熱心網友回復：

因為我是一個喜歡桌子的老派...

const data = [{
    category: "sports",
    items: "shoes",
    price: 599,
  },
  {
    category: "electronics",
    items: "phones",
    price: 898,
  },
  {
    category: "sports",
    items: "shirt",
    price: 788,
  },
  {
    category: "sports",
    items: "ball",
    price: 455,
  },
  {
    category: "electronics",
    items: "laptop",
    price: 999,
  },
  {
    category: "beauty",
    items: "lipstick",
    price: 888,
  },
];

// group data by category
const grouped = data
  .reduce((c, { category, ...rest }) => {
    c[category] = c[category] || [];
    c[category].push({ ...rest });
    return c;
  }, {})

// write it to the table
// create the header
const thead = document.getElementById('header');
let row = document.createElement('tr');
Object.keys(data[0]).forEach(k => {
  let hdr = document.createElement('th');
  hdr.appendChild(document.createTextNode(k));
  row.appendChild(hdr);
});
thead.appendChild(row);

// now fill the body
const tbody = document.getElementById('products');
for (const [category, products] of Object.entries(grouped)) {
  let row = document.createElement('tr');
  let cat = document.createElement('td');
  cat.setAttribute('rowSpan', products.length);
  cat.appendChild(document.createTextNode(category));
  row.appendChild(cat);
  products.forEach(product => {
    Object.values(product).forEach(v => {
      let td = document.createElement('td');
      td.appendChild(document.createTextNode(v));
      row.appendChild(td);
    });
    tbody.appendChild(row);
    row = document.createElement('tr');
  });
}

td, th {
  padding: 5px;
}

<table border="1">
  <thead id="header"></thead>
  <tbody id="products">
  </tbody>
</table>

uj5u.com熱心網友回復：

使用Array.prototype.reduce按類別對資料進行分組。
然后遍歷所有類別，并為每個類別回圈所有專案并創建所需的標記。

const data = [
  { category: "sports", item: "shoes", price: 599 },
  { category: "electronics", item: "phones", price: 898 },
  { category: "sports", item: "shirt", price: 788 },
  { category: "sports", item: "ball", price: 455 },
  { category: "electronics", item: "laptop", price: 999 },
  { category: "beauty", item: "lipstick", price: 888 },
];

const categories = data.reduce(
  (r, o) => ((r[o.category] ??= []).push(o), r),
  {}
);

Object.keys(categories).forEach((cat) => {
  const section = document.createElement("section");
  const heading = document.createElement("h2");
  heading.textContent = cat;
  section.appendChild(heading);

  categories[cat].forEach((item) => {
    const div = document.createElement("div");
    const itemPara = document.createElement("p");
    itemPara.textContent = item.item;
    const pricePara = document.createElement("p");
    pricePara.textContent = item.price;
    div.appendChild(itemPara);
    div.appendChild(pricePara);
    section.appendChild(div);
  });

  document.body.appendChild(section);
});

section {
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  padding: 1rem;
  text-transform: capitalize;
}

section   section {
  margin-top: 1rem;
}

section h2 {
  margin: 0.5rem 0;
}

section div {
  display: flex;
  justify-content: space-between;
}

section div p {
  margin: 0.25rem 0;
}

相關檔案：

Document.createElement
Node.appendChild
Array.prototype.forEach
空值合并運算子 (??)
逗號運算子 (,)
物件鍵

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/483558.html

標籤：javascript 数组目的

上一篇：我們如何將物件作為引數傳遞給物件值中的函式名？

下一篇：在java腳本中將字串轉換為物件中的鍵值對