Loop through Array of object with the same data on some object and get it displayed once

Question

I have an array of products like this

products: [
  {
    id: 1, 
    drinkName: "Chivita", 
    category: "Juice", 
    description: "The best drink ever"
  },
  {
    id: 1, 
    drinkName: "5 Alive", 
    category: "Juice", 
    description: "The best drink ever"
  },
  {
    id: 3, 
    drinkName: "Cocacola", 
    category: "Others", 
    description: "The best drink ever"
  }
];

What I want is to loop through the array and get the category displayed only once, I know each drink can have the same category, but I want it displayed only once, and also get the drinkName display under each category.

Example:

products.map((product) => {
     <AccordionItem key={productsSnapshot?.id}>
         <h2>
          <AccordionButton fontSize={"sm"} fontWeight={"medium"}>
             <Box flex="1" textAlign="left">
               {product?.category}
             </Box>
            <AccordionIcon />
          </AccordionButton>
        </h2>
    </AccordionItem>

});

For example, I have a let's say two drinkName with the category "Juice", if I try to map through the products and want to get the product?.category, I will have Juice printed twice, so I want it to get printed once, if it exists twice print only once -- I hope you understand

Is that possible?

rearrange your data ...categories:{Juice:[{id:1,drinkName:"Chivita",category:"Juice",description:"The best drink ever"},{id:1,drinkName:"5 Alive",category:"Juice",description:"The best drink ever"}],Others:[{id:3,drinkName:"Cocacola",category:"Others",description:"The best drink ever"}]} - easily done with reduce or similar — Bravo
– Bravo, Commented Mar 11, 2022 at 4:49
@Bravo, the data is coming from firestore, and over 180 product has been there. — AbdulAzeez Olanrewaju
– AbdulAzeez Olanrewaju, Commented Mar 11, 2022 at 4:53
I didn't say you would do it by hand! that's what array functions like reduce are for ... products.reduce((a, o) => ({ ...a, [o.category]:[...(a[o.category] || []), o]}), {}) — Bravo
– Bravo, Commented Mar 11, 2022 at 4:58

spatialaustin · Accepted Answer · 2022-03-11 04:59:11Z

4

Like @Bravo says:

const products = [
  {
    id: 1,
    drinkName: "Chivita",
    category: "Juice",
    description: "The best drink ever",
  },
  {
    id: 1,
    drinkName: "5 Alive",
    category: "Juice",
    description: "The best drink ever",
  },
  {
    id: 3,
    drinkName: "Cocacola",
    category: "Others",
    description: "The best drink ever",
  },
];

const MyComponent = () => {
  const items = products.reduce((prev, current) => {
    if (!current.category in prev) {
      prev[current.category] = [];
    }
    prev[current.category].push(current.drinkName);
    return prev;
  }, {});

  Object.keys(items).map((key) => {
    return (
      <AccordionItem key={key}>
        <h2>
          <AccordionButton fontSize={"sm"} fontWeight={"medium"}>
            <Box flex="1" textAlign="left">
              {key}
            </Box>
            <Box flex="1" textAlign="left">
              {items[key].map((drinkName) => {
                return <p key={drinkName}>{drinkName}</p>;
              })}
            </Box>
            <AccordionIcon />
          </AccordionButton>
        </h2>
      </AccordionItem>
    );
  });
};

edited Mar 11, 2022 at 4:59

answered Mar 11, 2022 at 4:52

spatialaustin

7716 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

AbdulAzeez Olanrewaju Over a year ago

Please I'm getting error in typescript, please refactor to typescript's way

AbdulAzeez Olanrewaju Over a year ago

The left-hand side of an 'in' expression must be a private identifier or of type 'any', 'string', 'number', or 'symbol'.

Emile Bergeron Over a year ago

@AbdulAzeezOlanrewaju there's no mention of typescript in your question. If there's a new issue, you should ask a new question if you can't figure it out on your own.

Bravo Over a year ago

you should tag your question with typescript then

AbdulAzeez Olanrewaju Over a year ago

I have tagged it

|

Collectives™ on Stack Overflow

Loop through Array of object with the same data on some object and get it displayed once

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related