Javascriptで動的オブジェクトを作成する

Question

jQueryを使用してDOMから引き出された属性から新しいJavascriptオブジェクトを作成しようとしています。私はプルしようとしている 情報このからデータ - *です：

<button type='button' class='pickup' data-name="apple" data-weight='1' data-color='red'>food</button> 

だから私はデータ名およびデータ・体重を取得し、（私がしなければならない場合、または既存の）新しいに入れたいですオブジェクト。ここで私は問題を抱えています。私は、オブジェクトが次のようになりたい：

MyObject = { 
       food: { 
         weight: 1, 
         color: 'red' 
         } 
       } 

私は「について（VAR I MyObjectにで）」ループを通って、このような新しいオブジェクトを作成しようとしてきたが、それがダウンして属性を追加することになるとMyObject {}に値を渡すと、それを動作させる方法がわかりません。

アイデアや提案はありますか？

---

以下の回答は完全に機能しました。ありがとうございました！ どのように動的に作成する場合：このような変数から

MyObject.food = {} 

、：

var Name = "meal"; 
    MyObject.Name = {} // creates MyObject.meal = {}; 

私はそれをどのように行うのでしょうか？私はMyObject [Name] = {}が動作すると思ったが、それは私のためには見えなかった。たぶん私は間違って入力した？ ：S

Answer 1

$(".pickup").data("name")は

コンプリートっぽい例の私の頭の上からなど、「りんご」あなたを取得します。

$(".pickup").click(function(){ 
    MyObject = { 
     food: { 
      weight: $(this).data("weight"), 
      color: $(this).data("color") 
     } 
    } 
}); 

Answer 2

属性がどのようなものかわからない場合は、.attributesオブジェクトをループすることができます。 HTML5対応のブラウザで

var attrs = $('.pickup')[0].attributes; // grab the attributes of the element 

var MyObject = { // create the object 
    food: {} 
}; 

    // loop the attributes, and add the data- attributes to the object 
$.each(attrs, function(_, v) { 
    if (v.name.indexOf('data-') !== -1) 
     MyObject.food[v.name.replace('data-', '')] = v.value; 
}); 

http://jsfiddle.net/5m7KF/

---

、あなたはdata-属性を取得するための要素の.datasetプロパティを使用することができます。

var data = $('.pickup')[0].dataset; 

var MyObject = { 
    food: {} 
}; 

$.each(data, function(k, v) { 
    MyObject.food[k] = v; 
}); 

http://jsfiddle.net/5m7KF/1/

Answer 3

あなたはこの

var d = $(".pickup").data(); 

"D" のようにjQueryを使用することができます$の属性を持つオブジェクトです（ 'ピックアップ。'）で始まる 'データ - '、そしてあなたそれを使用することができます あなたを助けることを願って！

Answer 4

var FinalObject= {} 
$('.filter-products select').each(function() { 
    var property= $(this).attr('id'); 
    var value = $(this).val(); 
    FinalObject[property] = value; 
}); 

console.log(FinalObject);