Создание динамических объектов с помощью Javascript

Я пытаюсь создать новый объект Javascript из атрибутов, извлеченных из DOM с помощью jQuery. информацию я пытаюсь вытащить это данных- * от этого:Создание динамических объектов с помощью Javascript

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

Так что я хочу, чтобы получить имя-данных и данных-вес и поместить их в новый (или существующий, если я должен) объект. Вот где у меня проблемы. Я хочу, чтобы объект выглядеть следующим образом:

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

Я пытался создать новый объект, как это через «для (вар я в MyObject)» цикл, но когда дело доходит до добавления атрибутов и значения в MyObject {} Я не могу понять, как заставить его работать.

Любые идеи или предложения?

Ответы ниже работали отлично! Спасибо! Как если бы я хотел, чтобы динамически создавать:

MyObject.food = {}

из переменной, например:

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

Как бы мне это сделать? Я думал, что MyObject [Name] = {} будет работать, но мне это не показалось. Может, я набрал это неправильно? : S

источник

2012-04-09 Kabe

$(".pickup").data("name") будет за вами «яблоко» и т.д.

Complete-иш пример с верхней части моей головы.

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

источник

2012-04-09 02:02:15 Chris

если нет, 'document.querySelector (". Pickup "). GetAttribute (" data-name ")' будет делать то же самое. – JKing

@ Комментарий JKing касается того, что я сказал перед моим редактированием. Я спросил, нормально ли использовать jQuery. Но потом я заметил, что он уже использовал его. Сохраняйте свой комментарий там. Я не знал об этом. + 1'd – Chris

Спасибо за это! С вашим редактированием, удаляющим контекст того, что я имел в виду, я действительно немного схожу с ума. Кроме того, это смешно, я не могу сказать, сколько раз я видел, как кто-то просто использовал «запрос» часть jQuery и взорвал их мысли с помощью документа.querySelector/querySelectorAll. Я не хочу отговаривать людей от jQuery, но есть много отличных/полезных вещей, которые он может сделать! Но вы можете сделать гораздо больше с ванильным JavaScript в эти дни, чем некоторые люди хотели бы вы поверить ... – JKing

Если вы не знаете, какие атрибуты будут, вы могли бы петлю на .attributes объект.

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/

В совместимых браузеров HTML5, вы можете использовать .dataset свойство элемента, чтобы получить data- атрибуты.

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

var MyObject = { 
    food: {} 
}; 

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

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

источник

2012-04-09 02:10:31

Tidy! Примечание для Kabe - ключ заключается в том, что иерархия MyObject создается заранее. Если у вас только есть MyObject = {}, вы не можете произвольно добавить MyObject.food [значение] = someValue. Пищевой объект в MyObject должен быть там заранее. –

Вы можете использовать JQuery как этот

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

"г" является объект с атрибутами $ начинаются с ('пикап'.) 'Данных -', то можете использовать его надеюсь, что это может вам помочь!

источник

2012-04-09 04:11:02

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

console.log(FinalObject);

источник

2013-08-09 15:36:20

Создание динамических объектов с помощью Javascript

ответ

Смежные вопросы