Filter array in objects array

JavaScript
1

Hello everyone, I have the following construct:

const allProducts = [
{
img:" xyz",
desc: "xyz",
categories:["Men", "Sportshoes"];
}
]

I want to get all products, where categories includes Men.
I tried: allProducts.filter((item)=>item.categories.includes("Men"))
also:

 allProducts.filter((item:any)=>{
        return item.categories[0] ==="Men";
    }).map(function (item:any) {
        return item[1];
      });

But both gives back an empty array. Thank you, for your help.

3

Thanks for your response. allProducts is an array of 21 objects like this:

  1. categories: [‘Men’ , ‘Sportshoes’]
  2. cloudinary_id: “l4x4u7w0bir6is4oo43a”
  3. colors: [‘black, white’]
  4. createdAt: “2022-12-27T09:46:40.973Z”
  5. currency: “€”
  6. desc: “Lorem Ipsum”
  7. image: “https://res.cloudinary.com/romandev/image/upload/v1672134400/l4x4u7w0bir6is4oo43a.jpg”
  8. inStock: true
  9. price: “89”
  10. producer: “Adidas”
  11. sizes: [‘39, 42, 45’]
  12. title: “Test product 5”
  13. updatedAt: “2022-12-27T09:46:40.973Z”
  14. __v: 0
  15. _id: “63aabf005b63a9507cc2f4a3”
  16. [[Prototype]]: Object
    I tried now:
const productsMen = allProducts.filter((item:any)=>{
        return item.categories[0] ==="Men";
      })
      console.log(productsMen);

Gives back empty array. Then:

  const productsMen = allProducts.filter((item:any)=>{
        return item.categories[0] ==="Men";
      }).map(function (item:any) {
        return item[1];
      })

Gives back empty array. And this one is alo empty:

const productsMen = allProducts.filter((item:any)=>{
        return item.categories[0] ==="Men";
      }).map(function (item:any) {
        return item.categories[1];
      })

What can be the reaon for this behaviour? Thanks

5

I get this Array from MongoDB. In code it must be:

const allProducts = [
{
 categories: [‘Men’ , ‘Sportshoes’],
 cloudinary_id: “l4x4u7w0bir6is4oo43a”,
colors: [‘black, white’],
createdAt: “2022-12-27T09:46:40.973Z”,
 currency: “€”,
desc: “Lorem Ipsum”,
image: “https://res.cloudinary.com/romandev/image/upload/v1672134400/l4x4u7w0bir6is4oo43a.jpg”,
 inStock: true,
price: “89”,
producer: “Adidas”,
sizes: [‘39, 42, 45’],
title: “Test product 5”,
updatedAt: “2022-12-27T09:46:40.973Z”,
__v: 0,
 _id: “63aabf005b63a9507cc2f4a3”,
}
]

When I do this, all twentyone Products are displayed correctly:

const productsChild = allProducts.filter((item:any)=>{
        return item;
      })
      console.log(productsChild);
  return (
    <Container>
      <ProductsWrapper>
        {productsChild.map((item:any)=>(
            <FieldWrapper key={item._id}>
                <ImgHolder>
                <img src={item.image} alt={item.categories} title={item.title}/>
                </ImgHolder>
                <DescHolder>
                    <h4>{item.title}</h4>
                    <h5>{item.categories}</h5>
                    <p>{item.desc}</p>
                    <p>{item.producer}</p>
                    <span>{item.price}{item.currency}</span>
                    <ColorHolder>
                    {item.colors.map((color:any)=>(
                        <div style={{backgroundColor:color}}></div>
                    ))}
                    </ColorHolder>
                </DescHolder>
            </FieldWrapper>
        ))}
      </ProductsWrapper>
    </Container>
7

const productsChild = allProducts.filter((item:any)=>{
return item.categories[0] ===“Men”;
})
console.log(productsChild);
gives back in the console:
Array(0)length: 0[[Prototype]]: Array(0)
The code comes from mongoDB, so there can’t be any fomatting issues. I don’t know either, why it is empty. When I filter nothing, then it renders correctly all twentyone products. So the data is there. And there are several objects, who’s categories including “Men” as first element.

8

Do me a favor and add the following console.log statement above this line and copy/paste what it shows into a reply.

console.log(JSON.stringify(allProducts, null, 2));
1 Like
9

Yes, now I think it is clear. I send the data as FormData, so I have to stringify the arrays.

const onSubmit=(e:React.FormEvent<HTMLFormElement>)=>{
      e.preventDefault();
      const productData = new FormData();
      productData.append("title", formdata.title);
      productData.append("producer", formdata.producer);
      productData.append("categories", JSON.stringify(formdata.categories));
      productData.append("desc", formdata.desc);
      productData.append("price", formdata.price);
      productData.append("colors", JSON.stringify(formdata.colors));
      productData.append("sizes", JSON.stringify(formdata.sizes));
      productData.append("inStock", formdata.inStock);
      productData.append('image', fileData.image!)
      for(let value of productData){
        console.log(value);
      }
      dispatch(createProduct(productData));
    }

In node I parse them again:

 const newProducts = new Products({
            cloudinary_id: uploadResult.public_id,
            title: req.body.title,
            producer: req.body.producer,
            categories: JSON.parse(req.body.categories),
            desc: req.body.desc,
            price: req.body.price,
            currency:req.body.currency,
            colors:JSON.parse(req.body.colors),
            sizes: JSON.parse(req.body.sizes),
            inStock: req.body.inStock,
            image: uploadResult.secure_url,

        })

When I write in the input field categories: Men, Sportshoes, the entry in MongoDb is “Men, Sportshoes”. Thank you RandellDawson.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.