Filtering objects by their properties or attributes in AngularJS can be achieved by using forEach, but encountering an error stating "forEach is

Question

Filtering objects by their properties or attributes in AngularJS can be achieved by using forEach, but encountering an error stating "forEach is

In my AngularJS application, I have a page that displays multiple widgets. One widget shows a table with details about a monitored system. Currently, the table has two columns: 'Type' and 'Data', displaying information and values respectively.

To customize the widget's display, users can click the 'Settings' button to open a dialog. In this dialog, they can input column headings and rows for the table. When typing in the 'Rows' field, a dropdown appears with available variables matching the user's input.

The function responsible for the dropdown is:

$scope.autocompleteVarsFilter = function(query) {
    if(!query && lastVarQryKw) {
        query = lastVarQryKw;
    }
    var result = Object.keys(fxVar.getVars()).filter(function(name) {
        return name.indexOf(query.toLowerCase()) !== -1;
    });

    if(result.length > 0) {
        lastVarQryKw = query;
    }
    return result;
};

I want to add a third column to the table that will contain links chosen by the user. These links are denoted by strings starting with :. The goal is to show all available pages when a user types : followed by filtering based on their input.

I updated the function as follows:

$scope.autocompleteVarsFilter = function(query) {
    if(query.startWith(":") {
        var buttonsQuery = query.substring(1);
        if(!buttonsQuery && lastVarQryKw) {
            buttonsQuery = lastVarQryKw;
        }

        var userPages = pagesPresets;
        console.log("Value of userPages: ", userPages);

        var page;
        for(page in userPages) {
            console.log("for loop started");
            if(page.key.startWith(buttonsQuery)) {
                console.log("Matching page found: ", page);
            }
        }

        if(result.length > 0) {
            lastVarQryKw = query;
        }
        return result;

    } else {
        if(!query && lastVarQryKw) {
            query = lastVarQryKw;
        }
        var result = Object.keys(fxVar.getVars()).filter(function(name) {
            return name.indexOf(query.toLowerCase()) !== -1;
        });

        if(result.length > 0) {
            lastVarQryKw = query;
        }

        return result;
    }
};

After testing, I encountered an issue where the pages weren't displayed in the dropdown when typing :. Console output showed a TypeError related to accessing the 'key' attribute of userpage objects.

I attempted different solutions like using forEach loops, but none resolved the issue. Anyone have suggestions?

javascript angularjs foreach filter getattribute

Answer 1

Answer №1

When using a for...in loop, you are iterating through the enumerable property names of an object. To access the corresponding value, you need to use that property name. Here's an example:

console.log('Using for...in on an object:');

var myObj = {
  'prop1': 'Hello world!',
  'prop2': 12345,
  'some crazy property': null
};

for (var propName in myObj) {

  console.log('propName is ' + propName);

  //Accessing the value using the property name.
  var propValue = myObj[propName];

  console.log('myObj[' + propName + '] is ' + propValue);

}

In contrast, with a forEach loop, you directly iterate over the values in an array. Your callback function receives the value directly without needing to access the array. Here's an example:

console.log('Using forEach on an array:');

var myArray = [
  {key: 'this is object 1!'},
  {key: 'this is object 2!'}
];

myArray.forEach(function (obj) {
  
  console.log('In ForEach loop...');
  
  console.log('obj is ' + JSON.stringify(obj));
  
  //Directly accessing the object's properties as needed.
  console.log('obj.key is ' + obj.key);
  
});

To update your code, you can use either for...in or forEach as shown below:

var buttonsQuery = 'pages/userpage2';

var userPages = [{
    _id: "...",
    _rev: 1,
    _url: "...",
    key: "pages/auth"
  },
  {
    _id: "...",
    _rev: 13,
    _url: "...",
    key: "pages/userpage2"
  },
  {
    _id: "...",
    _rev: 13,
    _url: "...",
    key: "pages/",
    value: "/pages/userpage1"
  }
]

console.log('Iterating using for...in');
for (var prop in userPages) {

  console.log('prop is ' + prop);

  //Accessing the page object using the property name.
  var page = userPages[prop];

  console.log('page is ' + JSON.stringify(page));

  if (page.key.startsWith(buttonsQuery)) {
    console.log("Matching page found: ", page);
  }
}


//Better way to iterate if userPages is an array:
console.log('iterating using forEach');
userPages.forEach(function(page) {

  //The page object is already available within the loop.
  //No need to access the array again.
  console.log('page is ' + JSON.stringify(page));

  //Accessing the object's properties as needed.
  if (page.key.startsWith(buttonsQuery)) {
    console.log("Matching page found: ", page);
  }
});

You may also consider using a for...of loop for iteration, but keep in mind that it's not supported in Internet Explorer.

Answer 2

When using a for...in loop, you are iterating through the enumerable property names of an object. To access the corresponding value, you need to use that property name. Here's an example:

console.log('Using for...in on an object:');

var myObj = {
  'prop1': 'Hello world!',
  'prop2': 12345,
  'some crazy property': null
};

for (var propName in myObj) {

  console.log('propName is ' + propName);

  //Accessing the value using the property name.
  var propValue = myObj[propName];

  console.log('myObj[' + propName + '] is ' + propValue);

}

In contrast, with a forEach loop, you directly iterate over the values in an array. Your callback function receives the value directly without needing to access the array. Here's an example:

console.log('Using forEach on an array:');

var myArray = [
  {key: 'this is object 1!'},
  {key: 'this is object 2!'}
];

myArray.forEach(function (obj) {
  
  console.log('In ForEach loop...');
  
  console.log('obj is ' + JSON.stringify(obj));
  
  //Directly accessing the object's properties as needed.
  console.log('obj.key is ' + obj.key);
  
});

To update your code, you can use either for...in or forEach as shown below:

var buttonsQuery = 'pages/userpage2';

var userPages = [{
    _id: "...",
    _rev: 1,
    _url: "...",
    key: "pages/auth"
  },
  {
    _id: "...",
    _rev: 13,
    _url: "...",
    key: "pages/userpage2"
  },
  {
    _id: "...",
    _rev: 13,
    _url: "...",
    key: "pages/",
    value: "/pages/userpage1"
  }
]

console.log('Iterating using for...in');
for (var prop in userPages) {

  console.log('prop is ' + prop);

  //Accessing the page object using the property name.
  var page = userPages[prop];

  console.log('page is ' + JSON.stringify(page));

  if (page.key.startsWith(buttonsQuery)) {
    console.log("Matching page found: ", page);
  }
}


//Better way to iterate if userPages is an array:
console.log('iterating using forEach');
userPages.forEach(function(page) {

  //The page object is already available within the loop.
  //No need to access the array again.
  console.log('page is ' + JSON.stringify(page));

  //Accessing the object's properties as needed.
  if (page.key.startsWith(buttonsQuery)) {
    console.log("Matching page found: ", page);
  }
});

You may also consider using a for...of loop for iteration, but keep in mind that it's not supported in Internet Explorer.

Filtering objects by their properties or attributes in AngularJS can be achieved by using forEach, but encountering an error stating "forEach is

Answer №1

Similar questions

When using a wildcard router in Node.js/Express.js, the static router may not be recognized

Data structure for Highcharts:

Incorrect footer navigation on my Vuepress website

The oddity of a lone quotation mark trying to break

Does ECMAScript differentiate between uppercase and lowercase letters?

Implement dynamic configuration injection by allowing users to specify the name of a configuration file during runtime, instead of having it fixed in the code

When attempting to send data using jQuery to PHP, an issue arises where PHP is unable to receive the information, resulting in an undefined variable

Steps for disabling and collapsing an individual header on the JQuery Accordian

Froala Editor experiencing crashes during editing process

Choosing an ID along with a numerical value in jQuery

`Developing reusable TypeScript code for both Node.js and Vue.js`

Is there a method by which I can access information from a linked document in Firebase?

The Bootstrap carousel spiraled into disarray

Ways to retrieve the total of all the values stored within an object created using a constructor function

Error message in my Angular project: Invalid Target Error

Guide to swapping images based on conditions using Angular JS

Having trouble running a form due to the inclusion of JavaScript within PHP code

Using AngularJS location.path for unique custom URLs

Can you explain the concepts of 'theme' and 'classes'?

Whenever I try to access my Node.js API from Heroku's live server, I encounter a CORS policy error