how can i lowercase object value/data in javascript using underscore for HTML5 document

Question

I have a array of objects ( arr ), each object has 3 properties (Department, Categories, ProductTypes) , the values for these properties are a mixture of upper and lower case. I have created a duplicate array of arr and named it arr2 . i needed to do a comparison between arr and a search filter (which is already lowercased) so it returns an array of objects back with the matching criteria and assign to arr using:

arr=_.where(arr2,filter);

so I'm thinking to iterate through arr2 and lowercase everything in here, as follows:

_.each( arr2, function(item){ //loop around each item in arr2
    _.each( item, function(properties){ //loop around each property in item
        properties=properties.toLowerCase();
        console.log("Item: ",item,"ID: ",properties); 
    });
});

however i get the following output in chrome:

Default1.html:109 Item:  Object {Departments: "Dep1", Categories: "Cat1", ProductTypes: "Prod1"} ID:  dep1
Default1.html:109 Item:  Object {Departments: "Dep1", Categories: "Cat1", ProductTypes: "Prod1"} ID:  cat1
Default1.html:109 Item:  Object {Departments: "Dep1", Categories: "Cat1", ProductTypes: "Prod1"} ID:  prod1

How can I change the “ Dep1/Cat1/Prod1 ” values to lowercase?

Answer 1

The reason is the when you use for each or for in loops, you get temp variables which are copies of the original and changes will apply only to the copy.

Here is working code:

arr2 = [{ObjectCategories: "Cat1", Departments: "Dep1", ProductTypes: "Prod1"}]

for (var i =0 ; i<arr2.length; i++){
    for (var key in arr2[i]){
        if (key === undefined || arr2[i][key] === undefined) {
            continue;
        }
        console.log(key)
        console.log(arr2[i][key])
        arr2[i][key] = arr2[i][key].toLowerCase();
    };
};
console.log(arr2[0])

For the sake of comparing the following code will not work:

arr2 = [{ObjectCategories: "Cat1", Departments: "Dep1", ProductTypes: "Prod1"}]

for (var item in arr2){
    for (var key in item){
        if (key === undefined || item[key] === undefined) {
            continue;
        }
        console.log(key)
        console.log(item[key])
        item[key] = item[key].toLowerCase();
    };
};
console.log(arr2[0])

You maybe find this interesting.

Answer 2

With some experimenting I managed to solve this, my final code snippet:

var arr2 = [];

_.each( arr, function(item){ //loop around each item in arr
    _.each( item, function(properties, id){ //loop around each property in item
        if (filter[id] == (item[id].toLowerCase())) {
            arr2.push( item );
        }
    });
});

Basically arr2 is declared empty initially, I iterate through arr via underscore for each item object, then iterate though each of the properties within the item object. I can then check if the search filter variable (which is already lowercase) equals the item's property value in lowercase, if so then add item object to arr2 object array. Simple!

There might be a more shorter function available in underscore to tidy this up even more.