Looping through the array inside another array

Question

First array:

var products_cart = [1, 2, 2]; (these are the products_id's)

Second array:

var cart_details =
    [{
        product_id: 1,
        product_name: 'product love',
        category_name: 'love'
    },
    {
        product_id: 2,
        product_name: 'product birthday love',
        category_name: 'birthday'
    }]

I want to loop through the elements of the array products_cart and use the product_id from products_cart to render details from cart_details (loop through them I suppose), how is this possible?

EDIT:

I think some of you got me wrong, I basically want this to render something like this:

[{
    product_id: 1,
    product_name: 'product love',
    category_name: 'love'
},
{
    product_id: 2,
    product_name: 'product birthday love',
    category_name: 'birthday'
},
{
    product_id: 2,
    product_name: 'product birthday love',
    category_name: 'birthday'
}
]

My mistake, I wasn't clear enough.

Answer 1

Assuming that the values of the products_cart are product id values, then you can try the following:

var products_cart = [1, 2, 2];

var cart_details = [{
    product_id: 1,
    product_name: 'product love',
    category_name: 'love'
  },
  {
    product_id: 2,
    product_name: 'product birthday love',
    category_name: 'birthday'
  }
]

for (var i=0, max=products_cart.length; i < max; i++) {
  for (var j=0, maxi = cart_details.length; j < maxi; j++) {
  
  if ( products_cart[i] == cart_details[j].product_id) {
       console.log( "product id: " + cart_details[j].product_id);
       console.log("product name: " + cart_details[j].product_name); 
       console.log("category name: " + cart_details[j].category_name,"\n\n");
      }
    
    }
  }

Answer 2

Do you need list? I think using json instead of list.

var products_cart = [1, 2, 2];

var cart_details =[
{
    product_id: 1,
    product_name: 'product love',
    category_name: 'love'
},
{
    product_id: 2,
    product_name: 'product birthday love',
    category_name: 'birthday'
}];

var new_cart_details = {};

// changed list to josn
cart_details.map( item => {
    new_cart_details[item.product_id] = {
        product_name: item.product_name,
        category_name: item.category_name
    }
});

products_cart.map( item => {
    console.log(new_cart_details[item])
});

Answer 3

You could use find() while looping through your ids array:

let products = [];

products_cart.forEach(id => {
    let product = cart_details.find(detail => detail.product_id === id);

    if (product) {
       products.push(product);
    }
});

Answer 4

What I would recommend doing is looping over the products_cart with .forEach(), then checking the keys of cart_details with Object.keys(), and looping over them as well. Then you can simply check whether the two match.

You then have a collection of all objects that have a product_id that is in your products_cart, and are free to do with them as you will.

The following example simply logs the objects back to you:

var products_cart = [1, 2, 2];

var cart_details = [{
    product_id: 1,
    product_name: 'product love',
    category_name: 'love'
  },
  {
    product_id: 2,
    product_name: 'product birthday love',
    category_name: 'birthday'
  },
  {
    product_id: 3,
    product_name: 'NOT IN ARRAY products_cart',
    category_name: 'SHOULD NOT BE SHOWN'
  }
]


products_cart.forEach(function(product) {
  Object.keys(cart_details).forEach(function(key) {
    if (product === cart_details[key].product_id) {
      console.log(cart_details[key]);
    }
  });
});

I've also included a third product to demonstrate that only products in products_cart will be shown in the conditional.

Hope this helps! :)

Answer 5

var products_cart = [1, 2, 2];
var cart_details = [{
product_id: 1,
product_name: 'product love',
category_name: 'love'
},
{
product_id: 2,
product_name: 'product birthday love',
category_name: 'birthday'
}];

products_cart.forEach(function(id){
  cart_details.forEach(function(detail){
    if(detail.product_id === id){
      console.log(detail);
    }
  });
});