Adding elements to an array

Question

Adding elements to an array

router.get("/api/cart", auth, async (req, res) => {
  try {
    const user = await User.findById(req.user._id);
    items = [];
    await user.cartProducts.forEach(async (product) => {
      var item = await Item.findById(product._id);
      items.push(item);
      console.log(items);
    });
    console.log(items)
    res.send(items);
  } catch (e) {
    res.status(500).send(e);
  }
});

I am retrieving the products selected by the user and sending them back in an array. The first console log displays the array with the products, but the second one shows an empty array. The API is functioning correctly without any issues. I suspect that the problem lies in my understanding of JavaScript concepts.

javascript arrays scope var let

Answer 1

Answer №1

To solve the issue where <code>await

does not work with .forEach, it is recommended to utilize a for loop:

items = [];

for(let product of user.cartProducts) {
   let item = await Item.findById(product._id);
   items.push(item);
}
console.log(items)
res.send(items);

UPDATE:

Additionally, this approach could potentially strain your database. If you require fetching 100 products, you would be making 100 separate requests to the DB.

There is an alternative method to achieve the same outcome in a more efficient manner:

const ids = user.cartProducts.map( p => p._id ); // Array of _id

const items = await Item.find({
    _id : {
         $in : ids
    })
    .lean() // Returns simple JSON, faster

Answer 2

To solve the issue where <code>await

does not work with .forEach, it is recommended to utilize a for loop:

items = [];

for(let product of user.cartProducts) {
   let item = await Item.findById(product._id);
   items.push(item);
}
console.log(items)
res.send(items);

UPDATE:

Additionally, this approach could potentially strain your database. If you require fetching 100 products, you would be making 100 separate requests to the DB.

There is an alternative method to achieve the same outcome in a more efficient manner:

const ids = user.cartProducts.map( p => p._id ); // Array of _id

const items = await Item.find({
    _id : {
         $in : ids
    })
    .lean() // Returns simple JSON, faster

Answer 3

Answer №2

Here's a helpful tip for you on how to manage selected values:

$(document).ready(function () {

  var selectedValues = [];
  
  $("input[name='checkbox']").change(function() {
  var value = $(this).val();
    if ($(this).is(':checked')) {
      selectedValues.push(value);
    }else{
    selectedValues.splice($.inArray(value, selectedValues),1);
    }
  });
 
  $('#button').on('click', function () {
        alert(selectedValues);
  });
  
});

<input name="checkbox" value="1" type="checkbox" />
<input name="checkbox" value="2" type="checkbox" />
<input name="checkbox" value="3" type="checkbox" />
<input name="checkbox" value="4" type="checkbox" />
<button id="button" type="button">button</button>

Answer 4

Here's a helpful tip for you on how to manage selected values:

$(document).ready(function () {

  var selectedValues = [];
  
  $("input[name='checkbox']").change(function() {
  var value = $(this).val();
    if ($(this).is(':checked')) {
      selectedValues.push(value);
    }else{
    selectedValues.splice($.inArray(value, selectedValues),1);
    }
  });
 
  $('#button').on('click', function () {
        alert(selectedValues);
  });
  
});

<input name="checkbox" value="1" type="checkbox" />
<input name="checkbox" value="2" type="checkbox" />
<input name="checkbox" value="3" type="checkbox" />
<input name="checkbox" value="4" type="checkbox" />
<button id="button" type="button">button</button>

Adding elements to an array

Answer №1

Answer №2

Similar questions

Having trouble with my code that counts the frequency of elements in an array

Displaying arrays in tabular and grid formats using PHP

Reordering React Lists: Showcasing the Latest Addition on Top

Tips for successfully uploading FormData files using Axios: Resolving the TypeError of "file.mv is not a function"

TRPC fails to respond to the passed configuration or variables (e.g., when enabled is set to false)

Angular $resource encounters a 400 Bad Request error when attempting a PUT request, triggering the $resolve and $promise

Retrieve the complete HTML content of a webpage, including the values of all input fields

Issue with AngularJS: Local storage not saving updated contenteditable data

How can you determine when a download using NodeJS HTTPS.get is complete?

Can a local image be incorporated into an HTML or CSS project through the use of Javascript or alternative methods?

Using jQuery's toggle function with a double click event to change the display to none

The Mongoose query for the id field retrieves both the id and _id values

Sending a response in the catch block based on conditions

The color of active links in TailwindCSS remains unchanged

After refreshing the page, Google Chrome finally displays the CSS styles correctly

One way to incorporate if / else if statements into a function within a Class component is by using conditional logic in React alongside Node and Express

Having an issue with my code in angular 12 where I am unable to successfully call an API to retrieve a token, and then pass that token to another API for further processing

Can you declare an array with a specific size in Kotlin only through initialization?

Can I retrieve the element of any DOM element I'm currently hovering over using JavaScript?

Using jquery to update a link when a different link is clicked