How can i display items based on categories they belong to in a list in react

huangapple
go评论101阅读模式
英文:

How can i display items based on categories they belong to in a list in react

问题

我正在尝试根据项目的类别显示项目列表，一个项目可以属于多个类别。

我希望将同一类别中的所有产品分组，并显示为一个列表。

以下是来自API的响应：

  1. {
  2.   "menu_items": [
  3.     {
  4.       "categorys": [
  5.         {
  6.           "category_id": 1,
  7.           "category_name": "Starters",
  8.           "category_public_id": "1686264145980.3584",
  9.           "created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
  10.           "description": "kmkmppp",
  11.           "menu": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
  12.           "updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
  13.         }
  14.       ],
  15.       "created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
  16.       "ingredients": ",p[ollp[lp[l",
  17.       "is_active": "active",
  18.       "itemId": 1,
  19.       "item_image": "https://res.cloudinary.com/dlh67cflz/image/upload/v1686264184/nova-ecommerce-products/jlazjhamnu6giineb2vb.jpg",
  20.       "item_name": "grilled pork",
  21.       "item_public_id": "1686264200760.36",
  22.       "menus": [
  23.         {
  24.           "created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
  25.           "isActive": true,
  26.           "menu_description": "kjmkmlk",
  27.           "menu_id": 1,
  28.           "menu_name": "christmas special",
  29.           "menu_public_id": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
  30.           "menu_type": "dine_in",
  31.           "merchant_id": "a46f810c-9f01-4eb2-b95a-2454959e4bbe",
  32.           "updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
  33.         }
  34.       ],
  35.       "price": 4500.0,
  36.       "rating": null,
  37.       "status": "in_stock",
  38.       "updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
  39.     },
  40.     {
  41.       "categorys": [
  42.         {
  43.           "category_id": 1,
  44.           "category_name": "Starters",
  45.           "category_public_id": "1686264145980.3584",
  46.           "created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
  47.           "description": "kmkmppp",
  48.           "menu": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
  49.           "updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
  50.         }
  51.       ],
  52.       "created_at": "Wed, 21 Jun 2023 13:22:43 GMT",
  53.       "ingredients": "with soy sauce, cabbage, onions",
  54.       "is_active": "active",
  55.       "itemId": 2,
  56.       "item_image": "https://res.cloudinary.com/dlh67cflz/image/upload/v1687343564/nova-ecommerce-products/qbdlhnesmzt9uoqffq7z.webp",
  57.       "item_name": "grilled pork",
  58.       "item_public_id": "1687343605822.5493",
  59.       "menus": [
  60.         {
  61.           "created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
  62.           "isActive": true,
  63.           "menu_description": "kjmkmlk",
  64.           "menu_id": 1,
  65.           "menu_name": "christmas special",
  66.           "menu_public_id": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
  67.           "menu_type": "dine_in",
  68.           "merchant_id": "a46f810c-9f01-4eb2-b95a-2454959e4bbe",
  69.           "updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
  70.         }
  71.       ],
  72.       "price": 25000.0,
  73.       "rating": null,
  74.       "status": "in_stock",
  75.       "updated_at": "Wed, 21 Jun 2023 13:22:43 GMT"
  76.     },
  77.     {
  78.       "categorys": [
  79.         {
  80.           "category_id": 2,
  81.           "category_name": "Dinner",
  82.           "category_public_id": "1687977074146.201",
  83.           "created_at": "Wed, 28 Jun 2023 21:08:30 GMT",
  84.           "description": "jnjniojiojo",
  85.           "menu": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
  86.           "updated_at": "Wed, 28 Jun 2023 21:08:30 GMT"
  87.         }
  88.       ],
  89.       "created_at": "Wed, 28 Jun 2023 21:08:30 GMT",
  90.       "ingredients": "with minsed matooked and rice",
  91.       "is_active": "active",
  92.       "itemId": 3,
  93.       "item_image": "https://res.cloudinary.com/dlh67cflz/image/upload/v1687977153/nova-ecommerce-products/nocjoso04uur4fm8hkfd.webp",
  94.       "item_name": "mushroom soup",
  95.       "item_public_id": "1687977183611.3896",
  96.       "menus": [
  97.         {
  98.           "created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
  99.           "isActive": true,
  100.           "menu_description": "kjmkmlk",
  101.           "menu_id": 1,
  102.           "menu_name": "christmas special",
  103.           "menu_public_id": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
  104.           "menu_type": "dine_in",
  105.           "merchant_id": "a46f810c-9f01-4eb2-b95a-2454959e4bbe",
  106.           "updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
  107.         }
  108.       ],
  109.       "price": 45000.0,
  110.       "rating": null,
  111.       "status": "in_stock",
  112.       "updated_at": "Wed, 28 Jun 2023 21:08:30 GMT"
  113.     }
  114.   ],
  115.   "success": true
  116. }

我目前卡在这里，尝试了以下代码，但没有产生预期的结果：

  1. {Items?.menu_items?.map((items, index) => (
  2.   <div className='mb-8'>
  3.     {items?.categorys.map(c => (
  4.       <>
  5.         {c.category_public_id === items?.categorys[0]?.category_public_id && (
  6.           <>
  7.             <h2 className
  9. <details>
  10. <summary>英文:</summary>
  12. I am trying to display items in a list based on category of the items, an item can belong to a list of categories.
  14. I want all products in a category to be grouped under that category and display as a list
  16. Below is my response from API

{
"menu_items": [
{
"categorys": [
{
"category_id": 1,
"category_name": "Starters",
"category_public_id": "1686264145980.3584",
"created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
"description": "kmkmppp",
"menu": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
"updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
}
],
"created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
"ingredients": ",p[ollp[lp[l",
"is_active": "active",
"itemId": 1,
"item_image": "https://res.cloudinary.com/dlh67cflz/image/upload/v1686264184/nova-ecommerce-products/jlazjhamnu6giineb2vb.jpg",
"item_name": "grilled pork",
"item_public_id": "1686264200760.36",
"menus": [
{
"created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
"isActive": true,
"menu_description": "kjmkmlk",
"menu_id": 1,
"menu_name": "christmas special",
"menu_public_id": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
"menu_type": "dine_in",
"merchant_id": "a46f810c-9f01-4eb2-b95a-2454959e4bbe",
"updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
}
],
"price": 4500.0,
"rating": null,
"status": "in_stock",
"updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
},
{
"categorys": [
{
"category_id": 1,
"category_name": "Starters",
"category_public_id": "1686264145980.3584",
"created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
"description": "kmkmppp",
"menu": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
"updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
}
],
"created_at": "Wed, 21 Jun 2023 13:22:43 GMT",
"ingredients": "with soy sauce, cabbage, onions",
"is_active": "active",
"itemId": 2,
"item_image": "https://res.cloudinary.com/dlh67cflz/image/upload/v1687343564/nova-ecommerce-products/qbdlhnesmzt9uoqffq7z.webp",
"item_name": "grilled pork",
"item_public_id": "1687343605822.5493",
"menus": [
{
"created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
"isActive": true,
"menu_description": "kjmkmlk",
"menu_id": 1,
"menu_name": "christmas special",
"menu_public_id": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
"menu_type": "dine_in",
"merchant_id": "a46f810c-9f01-4eb2-b95a-2454959e4bbe",
"updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
}
],
"price": 25000.0,
"rating": null,
"status": "in_stock",
"updated_at": "Wed, 21 Jun 2023 13:22:43 GMT"
},
{
"categorys": [
{
"category_id": 2,
"category_name": "Dinner",
"category_public_id": "1687977074146.201",
"created_at": "Wed, 28 Jun 2023 21:08:30 GMT",
"description": "jnjniojiojo",
"menu": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
"updated_at": "Wed, 28 Jun 2023 21:08:30 GMT"
}
],
"created_at": "Wed, 28 Jun 2023 21:08:30 GMT",
"ingredients": "with minsed matooked and rice",
"is_active": "active",
"itemId": 3,
"item_image": "https://res.cloudinary.com/dlh67cflz/image/upload/v1687977153/nova-ecommerce-products/nocjoso04uur4fm8hkfd.webp",
"item_name": "mushroom soup",
"item_public_id": "1687977183611.3896",
"menus": [
{
"created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
"isActive": true,
"menu_description": "kjmkmlk",
"menu_id": 1,
"menu_name": "christmas special",
"menu_public_id": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
"menu_type": "dine_in",
"merchant_id": "a46f810c-9f01-4eb2-b95a-2454959e4bbe",
"updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
}
],
"price": 45000.0,
"rating": null,
"status": "in_stock",
"updated_at": "Wed, 28 Jun 2023 21:08:30 GMT"
}
],
"success": true
}

  2. I am stack at the moment ,tried this but not producing expected results

{Items?.menu_items?.map((items,index)=>(
<div className='mb-8'>

  1.                                 {items?.categorys.map(c=&gt;(
  2. &lt;&gt;
  3. {c.category_public_id===items?.categorys[0]?.category_public_id &amp;&amp; (
  4. &lt;&gt;
  5. &lt;h2 className=&quot;text-lg font-semibold text-slate-900 py-2&quot;&gt;{c.category_name}&lt;/h2&gt;

<ul role="list" className="-my-5 divide-y divide-gray-300">
.....
</ul>
)}
</>

))}

</div>

))}

  2. </details>
  3. # 答案1
  4. **得分**: 0
  5. 我认为从类别开始而不是项目可能是一个不错的方法。也许将所有类别放入一个数组中，然后按类别进行映射。
  6. ```jsx
  7. const categories = ["a", "b", "c"];
  8. return (
  9. categories.map(category => (
  10. <ul className="a">
  11. {Items.map(item => {
  12. return item.category === category ? <li>{item.whateverYouNeed}</li> : null;
  13. })}
  14. </ul>
  15. ))
  16. )

或者你可以再创建一个组件来拆分它。创建一个CategoryBlock组件，它接受一个要显示的项目数组，然后这样做：

  1. const CategoryBlock = ({ elements }) => {
  2.   return (
  3.     <div>
  4.       {elements.map(e => (
  5.         <li>{e.whateverYouWant}</li>
  6.       ))}
  7.     </div>
  8.   );
  9. };
  11. categories.map(category => (
  12.   <CategoryBlock elements={items.filter(item => item.category === category)} />
  13. ))

从你的获取响应中看，似乎你的类别是数据库中的一个单独文档或表，所以获取所有类别不会成为问题。

英文:

I'm thinking that starting off from categories rather then items would be good approach. Maybe get all categories in an array and map by them.

  1. const categories = [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;]
  2. return ( categories.map( category =&gt; &lt;ul className = &quot;a&quot;&gt; {Items.map( item =&gt; {item.category === category ? &lt;li&gt; {item.whateverYouNeed} &lt;/li&gt;})}
  3. &lt;/ul&gt; ) )

Alternatevly you can break it up with one more component. Make a categoryBlock <br> const CategoryBlock = ({elements}) =&gt; { return (&lt;div&gt; { elements.map( e =&gt; &lt;li&gt;{e.whateverYouWant}&lt;/li&gt; ) }&lt;/div&gt;) <br>which takes in an array of items you want to display component and then do

  1. categories.map( category =&gt; &lt;CategoryBlock elements = {items.filter( item =&gt; item.category === category )}/&gt; )

From your fetch response it seems like you have categories as a seperate document or table in your db so getting all the categories wouldn't be a problem

huangapple
  • 本文由 发表于 2023年6月29日 05:01:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/76576680.html
  • arrays
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定