2012-05-30 27 views
9

以下のオブジェクトでは、プロパティ名thumbthumbnailに変更したいと思います。また、titleの値を<span>タグに変更したいと思います。ここでプロパティ名の変更と複数のオブジェクトの値の変更

は私のオブジェクトです:

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

は、ここで私はそれを見たいのですが方法は次のとおりです。

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>', 
}]; 

は、ここで私が動作しない試みたものです:

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>"; 
    } 
+0

あなたは手でこれを行う方法を求めていますか?もしそうなら、あなたはあなたの投稿を明確にすべきです。 –

+0

@ HunterMcMillenは、これがどのようにプログラムでjavascriptを使用して行われるかを尋ねています。私はforループが必要だと思いますが、それを動かすことはできません。私は私のポストで明らかにする。 –

答えて

19

これはトリックを行うようです:

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:

私は、関数がジェネリック作ってみましたが、あなたは非常に特定の物事を行うには、あなたの答えを更新してから、私は、関数にビジネスロジックを追加しました。

+0

forEachループを指摘してくれた元の – lbstr

10

あなたができるiterate over the arrayは、古いプロパティを各オブジェクトに新しいプロパティを設定し、delete

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

は、ここで(コンソールでの出力を確認してください)working exampleです。

旧式のブラウザをサポートしたい場合は、Array.prototype.forEachのpolyfillを使用することをお勧めします(上記のMDNの記事に1つあります。または、通常のforループを使用することもできます)。

+1

を修正する代わりに、新しいオブジェクトを作成することをお勧めします。このためにpolyfillが不要になるまで待つことはできません。 – lbstr

+0

@lbstrねえ、私はこの問題に遭遇し、あなたはMVCのコントローラー自体で同じことをすることができるか知っていますか – Vivekh

2

私は、プロパティ名の名前を変更するにはすてきな機能を作成しました:https://github.com/meni181818/simpleCloneJS/blob/master/renameProperties.js

例:

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; 
} 
:あなたはこの関数内$.each機能を使用することができますあなたはjQueryのを使用しているので

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'} 
    }; 

デモ:http://jsfiddle.net/g2jzse5k/

関連する問題