how to loop through two array in react?

Question

I'm trying to get my data from 2 arrays:

Here is my function:

function Cart({ basketProps }) {
  let productsInCart = [];

  Object.keys(basketProps.products).forEach(function (item) {
    if (basketProps.inCart) {
      productsInCart.push(basketProps.products);
    }
    console.log(productsInCart);
  });

  ...
  ...
  ...
}

when i do console.log it return me this:

[{…}]
0:
products: Array(1)
0:
img_url1: "https://thebeuter.com/wp-content/uploads/2020/06/38-1.jpg"
price: 1290000
title: "BEUTER BACK2BACK ZIPPER WHITE JACKET"
__proto__: Object
length: 1
__proto__: Array(0)
__proto__: Object
length: 1
__proto__: Array(0)

How can I use .map to loop thru these?

Updated: When I do console.log(basketProps). It gave me this:

basketNumbers: 1
cartCost: 1290000
inCart: true
numbers: 1
products:
 products: Array(1)
  0: {title: "BEUTER BACK2BACK ZIPPER WHITE JACKET", price: 1290...}

you have item as an argument for the function but you are using basketProps within the function. Is that on purpose? — Udendu Abasili
– Udendu Abasili, Commented Aug 4, 2020 at 4:11
Yes. Here is my github project if you want to look up my code: github.com/nathannewyen/the-beuter — nathannewyen
– nathannewyen, Commented Aug 4, 2020 at 4:30

Vijay122 · Accepted Answer · 2020-08-04 04:59:44Z

1

You dont require the 'Object.keys' function, since inCart is already available at outer level.

if (basketProps.inCart) {
  productsInCart.push(basketProps.products);
}
let total =0;

productsInCart.map(cartProduct=>{
 total = total + cartProduct.price;
}

You can run the map function on productInCart array like above.

answered Aug 4, 2020 at 4:59

Vijay122

9648 silver badges13 bronze badges

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

Comments

macborowy · Accepted Answer · 2020-08-04 05:29:47Z

To select all products inCart use:

filter to select all products inCart
map (or flatMap) to select products property you're interested in

I use flatMap because it makes list easier to render - it makes an array of products, not an array of product arrays. flatMap first maps each element using a mapping function, then flattens the result into a new array (it is identical to a map() followed by a flat() of depth 1).

function App() {
  return <Cart basketProps={DATA} />;
}

function Cart({ basketProps }) {
  const productsInCart = basketProps
    .filter(product => product.inCart)
    .flatMap(product => product.products);

  return (
    <div className="App">
      <ul>
        {productsInCart.map(product => (
          <li>{product.title}</li>
        ))}
      </ul>
    </div>
  );
}

const DATA = [
  { inCart: true, products: [
    { title: "PRODUCT 1", price: 10 },
    { title: "PRODUCT 2", price: 20 }
  ]},
  { inCart: false, products: [
    { title: "PRODUCT 3", price: 30 },
    { title: "PRODUCT 4", price: 40 }
  ]},
  { inCart: true, products: [
    { title: "PRODUCT 5", price: 50 },
    { title: "PRODUCT 6", price: 60 }
  ]}
];

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

kiranvj · Accepted Answer · 2020-08-04 05:37:25Z

1

I assume basketProps.products is an object array which has list of products, and has inCart = true if the product is in cart

In that case your code to get the products in cart should be like this

let productsInCart = [];

 if(basketProps && Array.isArray(basketProps.products)) {
    productsInCart = basketProps.products.filter(function (item) {
       return item.inCart ;    
   });
}
console.log(productsInCart )

or if you are using arrow functions, the one liner would be (add array validation as in example above)

let productsInCart = basketProps.products.filter((item)=>(item.inCart));
console.log(productsInCart);

edited Aug 4, 2020 at 5:37

answered Aug 4, 2020 at 5:05

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

2 Comments

nathannewyen Over a year ago

im getting: TypeError: basketProps.products.filter is not a function

kiranvj Over a year ago

Is basketProps.products an array? If you we may need to check if data is available. I will update answser

Collectives™ on Stack Overflow

how to loop through two array in react?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related