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

The alignment of elements in the div seems to be slightly skewed

Tips for dynamically assigning unique IDs to HTML form elements created within a JavaScript loop

Vue: Child component not rendering string prop

When transitioning between views in Angular App, it freezes due to the large data response from an HTTP request

What situations call for the use of 'import * as' in TypeScript?

Issue encountered: ENOENT - There is no file or directory located at the specified path for ... .steampath

Tips for managing and modifying information with a dropdownlist in asp.net core mvc and angular js

Incorporate the Google Maps API into a React application

When the disk space is insufficient, the createWriteStream function will not trigger an error event if the file is not completely written

Update the contents of a webpage using AJAX

Looking to incorporate HTML and JavaScript to create two unique forms that can be submitted separately on a single webpage

Inconsistency in date serialization using JSON.stringify across various web browsers

Can curly braces be utilized in the style section of Vue.js?

When the browser is not in the foreground, clicking on the Bootstrap datepicker with Selenium does not register

The subsequent block within the code is being initiated following the initial block in Node.js

React Checkbox Sum Component - Effortlessly Improve User Experience

Unexpected value assigned to private variable within a PHP class

Modifying the scope variable does not trigger an update in the AngularJS directive

Formik integration issue with MUI DatePicker causing error message: "date.isBefore is not a function"

Experience real-time updates on webpages with Node.js and Socket.io