Skip to content Skip to sidebar Skip to footer

Rename The Property Names And Change The Values Of Multiple Objects

In the object below, I'd like to change the property name, thumb, to thumbnail. I'd also like to change the values of the title to include tags. Here's my object: var

Solution 1:

This seems to do the trick:

function changeData(data){
    var title;
    for(var i = 0; i < data.length; i++){
        if(data[i].hasOwnProperty("thumb")){
            data[i]["thumbnail"] = data[i]["thumb"];
            delete data[i]["thumb"];
        }

        if(data[i].hasOwnProperty("title")){ //added missing closing parenthesis
            title = data[i].title;
            data[i].title = '<span class="red">' + title + '</span>';
        }
    }
}

changeData(data);

EDIT:

I tried to make the function generic, but since you updated your answer to do very specific things, I've added the business logic to the function.

Solution 2:

You can iterate over the array, set a new property in each object, and delete the old property:

data.forEach(function(e) {
   e.thumbnail = e.thumb;
   delete e.thumb;    
});

Here's a working example (check the output in the console).

Obviously you'll want to use a polyfill for Array.prototype.forEach if you want to support older browsers (there's one in the MDN article I linked to above, or you could just use a normal for loop).

Solution 3:

I have created a nice function to rename properties names: https://github.com/meni181818/simpleCloneJS/blob/master/renameProperties.js

example:

var sourceObj = {
    foo: 'this is foo',
    bar: {baz: 'this is baz',
          qux: 'this is qux'}
};
//                                the source, rename listvar replacedObj = renameProperties(sourceObj, {foo: 'foooo', qux: 'quxxxx'});
// replacedObj output => {
        foooo: 'this is foo',
        bar: {baz: 'this is baz',
              quxxxx: 'this is qux'}
    };

Since you are using Jquery you can use $.each function inside this function:

functionrenameProperties(sourceObj, replaceList, destObj) {
    destObj = destObj || {};
    $.each(sourceObj, function(key) {
        if(sourceObj.hasOwnProperty(key)) {
            if(sourceObj[key] instanceofArray) {
                if(replaceList[key]) {
                    var newName = replaceList[key];
                    destObj[newName] = [];
                    renameProperties(sourceObj[key], replaceList, destObj[newName]);
                } elseif(!replaceList[key]) {
                    destObj[key] = [];
                    renameProperties(sourceObj[key], replaceList, destObj[key]);
                }
            } elseif(typeof sourceObj[key] === 'object') {
                if(replaceList[key]) {
                    var newName = replaceList[key];
                    destObj[newName] = {};
                    renameProperties(sourceObj[key], replaceList, destObj[newName]);
                } elseif(!replaceList[key]) {
                    destObj[key] = {};
                    renameProperties(sourceObj[key], replaceList, destObj[key]);
                }
            } else {
                if(replaceList[key]) {
                    var newName = replaceList[key];
                    destObj[newName] = sourceObj[key];
                } elseif(!replaceList[key]) {
                    destObj[key] = sourceObj[key];
                }
            }
        }
    });
    return destObj;
}

demo: http://jsfiddle.net/g2jzse5k/

Post a Comment for "Rename The Property Names And Change The Values Of Multiple Objects"