Rename the property names and change the values of multiple objects

Question

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 <span> tags.

Here's my object:

var data = [{
    thumb: '/images/01.png',
    title: 'My title',
},{
    thumb: '/images/02.png',
    title: 'My title',
},{
    thumb: '/images/03.png',
    title: 'My title',
}];

here's how I'd like it to look:

var data = [{
    thumbnail: '/images/01.png',
    title: '<span class="red">title 1</span>',
},{
    thumbnail: '/images/02.png',
    title: '<span class="red">title 2</span>',
},{
    thumbnail: '/images/03.png',
    title: '<span class="red">title 3</span>',
}];

Here's what I've tried which doesn't work:

 var i=0, count=data.length;
   for (i=0;i<=count;i++){
    data[i].thumbnail=data[i].thumb;
    data[i].title="<span class='red'>"+data[i].title+"<span>";
   }

Are you asking for a way to do this _not_ by hand? If so, you should clarify in your post. — Hunter McMillen, May 30 '12 at 15:56
@HunterMcMillen asking for how I this would be done programmatically using javascript. I assume i need a for loop but can't get that to work. I'll clarify in my post. — tim peterson, May 30 '12 at 15:58

score 21 · Accepted Answer · edited May 30 '12 at 18:57

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.

I'd recommend creating a new object instead of modifying the original — lbstr, Sep 29 '16 at 19:53

score 10 · Answer 2 · answered May 30 '12 at 15:57

10

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).

answered May 30 '12 at 15:57

James Allardice

164,175
21
332
312

1

thanks for pointing out the forEach loop. Can't wait until we don't need a polyfill for this. – lbstr May 31 '12 at 16:01
@lbstr Hey I came across this Problem and do you know how we can do the same in controller itself in MVC – Vivekh Feb 05 '14 at 15:29

score 2 · Answer 3 · answered Aug 10 '14 at 18:59

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 list
var 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:

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

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

Rename the property names and change the values of multiple objects

3 Answers3

Linked

Related