Transform the jQuery each method into vanilla JavaScript

Question

Transform the jQuery each method into vanilla JavaScript

I have a script that displays a dropdown in a select box. The current script I am using is as follows:

jQuery.each( dslr, function( index, dslrgp) {
    var aslrp= dslrgp.aslrp;
    jQuery.each( aslrp, function(index2, pslrp) {
        var found = 0;
        jQuery.each( dropdown, function(index3, dditem) {
            if (dditem.countryname == pslrp.countryname)
            {
                foundit = 1;
            }
        });
        if (foundit == 0)
            dropdown.push(pslrp);

    });
});

How can I convert this to pure JavaScript? When I try the following:

dslr.forEach(function( index, dslrgp) {
    var aslrp= dslrgp.aslrp;
    aslrp.forEach(function(index2, pslrp) {
        var found = 0;
        dropdown.forEach(function(index3, dditem) {
            if (dditem.countryname == pslrp.countryname)
            {
                foundit = 1;
            }
        });
        if (foundit == 0)
            dropdown.push(pslrp);

    });
});

it does not work.

javascript

Answer 1

Answer №1

Take note of the change in argument order for the native forEach - the first argument is now the value of the item, while the second argument is the index. Instead of:

aslrp.forEach(function(index2, pslrp) {
...
dropdown.forEach(function(index3, dditem) {

try this instead:

aslrp.forEach(function(pslrp, index2) {
...
dropdown.forEach(function(dditem,index3) {

Answer 2

Take note of the change in argument order for the native forEach - the first argument is now the value of the item, while the second argument is the index. Instead of:

aslrp.forEach(function(index2, pslrp) {
...
dropdown.forEach(function(index3, dditem) {

try this instead:

aslrp.forEach(function(pslrp, index2) {
...
dropdown.forEach(function(dditem,index3) {

Answer 3

Answer №2

Your method signature needs to be adjusted. Here is the correct format:

arr.forEach(function iterate(value, position, list) {
    //your iterator logic here
}[, optionalThisArg]);

For more information, refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Answer 4

Your method signature needs to be adjusted. Here is the correct format:

arr.forEach(function iterate(value, position, list) {
    //your iterator logic here
}[, optionalThisArg]);

For more information, refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Answer 5

Answer №3

You might want to review how you're using the .forEach() method. Check out this documentation on forEach

Remember, you only need to pass the callback function as an argument, not the entire array.

myArray.forEach(function(item) {
  // do something..
}

You can also iterate with both the key and value if needed:

myArray.forEach(function(value, index) {
  // do something..
}

Answer 6

You might want to review how you're using the .forEach() method. Check out this documentation on forEach

Remember, you only need to pass the callback function as an argument, not the entire array.

myArray.forEach(function(item) {
  // do something..
}

You can also iterate with both the key and value if needed:

myArray.forEach(function(value, index) {
  // do something..
}

Transform the jQuery each method into vanilla JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

There seems to be an issue with Jquery Ajax retrieving information from an ASP.NET WEB API

Enter a socket.IO chat room upon accessing an Express route

Can you eliminate data errors within a Vue component?

I am struggling with grasping the concept of the event system

Obtain access to the DOM element using template reference variables within the component

Learn how to securely download files from an Azure Storage Container using Reactjs

ERROR TRACKER: Unable to locate file "CL.exe". File not found in system

When there is no content in the responseText, AJAX will display an error

The content is not visible following the quotation mark

Animating the mobile menu transition using Bootstrap CSS

How to incorporate Mixin in your Nuxt template

What causes a stack trace to be logged alongside a rejected Promise in Node version 7.2.0?

What is the best way to conceal a Boostrap Navbar using jQuery?

Enhance the list visualization in Next.js by efficiently transferring data from child components

What is the best way to smoothly move a fixed-size div from one container to another during a re-render process?

What is the best way to include the toast component in my button?

What is the process for configuring the global warning level in ESLint?

Determine the specific value of an HTML table cell by specifying the column name for a specific row

What is the method for specifying the HTML file extension within Visual Studio?

Encountering a bizarre npm issue while attempting to execute npm install for brain.js