how to loop through two array in react? - reactjs

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...}

Answer 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.

Answer 2

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>

Answer 3

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);