as by values within objects

Question

I have a "span" with properties date:

 <span data-label="Name" data-icon="user"></span>

And in the script I have a variable with objects:

 var widgets = {
    options: {
       label: null,
       icon: null
    }
 };

How can I search and put the values of date inside the objects???

edição

I tried to put as it is in the question to facilitate, but apparently it complicated more. I apologize kkkkk

But here’s the thing I’m looking to create "widgets" to perform their roles in accordance with the "data-role" provided, then it performs the respective function, with some options that can give more information than in case are other "date-...", follows the code:

  $.widget = function(name, parameters){
        $(document).ready(function(){
              var widgets = $("[data-role=" + name + "]");
  Object.keys(parameters.options).forEach(function(key){
                    parameters.options[key] = widgets.data(key);
              });

              parameters._create(widgets);
        });
  };

  var widget = $.widget;

  $.widget("input", {

        options: {
              label: null,
              icon: null
        },

        _create: function(element){
              var o = this.options;
              $("<span/>").addClass("label fg-" + _theme_featured).text(o.label).appendTo(element);

But it just collects data from the first and adds in all, I would like it to be individual

Answer 1

The steps you need:

• have access to this element, for examplevar span = document.querySelector('span');

• you can access the data of these fields data- with the Native API .dataset

• pass these values to your object:

---

When you pass the values to the object widgets can have two approaches.

a) Or use the object keys and search for it in the DOM:

Object.keys(widgets.options).forEach(function(chave){
    widgets.options[chave] = span.dataset['data-' + chave];
});

b) Or use the fields data- of the element and passes to the object. In this way you pass all fields data- at the same time.

... by the wayward way:

widget.options = span.dataset;

... or the ES6 way

widgets.options = Object.assign({} ,span.dataset);

Examples: https://jsfiddle.net/rkz5fkaw/

Answer 2

The logic for that would be very simple:

var widgets = {
  options: {
    label: null,
    icon: null
  }
};

var span = document.getElementsByTagName("span")[0];

widgets.options.label = span.getAttribute("data-label");
widgets.options.icon = span.getAttribute("data-icon");

document.write("<b> Span data-label: </b>" +widgets.options.label + "<br> <b> Span data-icon: </b>" + 
widgets.options.icon)

<span data-label="Name" data-icon="user"></span>

To search, simply place the object names on a hierarchical level and separated by a point ("."). For example:

var objeto1 = {
   objeto11: {
     objeto111: {
       chave: true
     }
   },
   objeto12: {
     objeto121: {
       chave: false
     }
   }
 }

objeto1.objeto11.objeto111.chave; // Retornaria "true"
objeto1.objeto12.objeto121.chave; // Retornaria "false"

Already one of the ways of "date-." capture is the .getAttribute("data-.."), as in my example. Or you could deteminate the value of data for .setAttribute("data-...", "novo valor"). In this case, the second option would have two arguments.

Answer 3

You can use the dataset property.

Ex.:

var span = document.getElementsByTagName("span")[0];
span.dataset.label; // "Name"
span.dataset.icon; // "User"

Dataset properties can be read and written. https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

Or you can read with the method span.getAttribute('data-label'); and write with the method span.setAttribute('data-label', 'Name');