as per values inside objects [closed]

Question

as per values inside objects [closed]

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (2 votes)

2

I have a " span " with date properties:

 <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 by the date values within the objects ???

edição

I tried for how you are in the question to facilitate, but apparently complicated more. I apologize kkkkk

But this is what I'm looking forward to creating " widgets " that performs your roles according to the " data-role " provided, then performs the respective function , with some options that can give more information that in the case are other " date -... ", follow 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

javascript jquery

asked by anonymous 01.01.2016 / 00:23

3 answers

Prohibit duplicate emails in MySQL using PHP How to make the background inside a div occupy the entire body

score 4 · Answer 1

The steps you need:

Access this element, for example var span = document.querySelector('span');
You can access data from these data- fields with the Native API .dataset
Pass these values to your object:

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

a) Either you use the object's keys and you'll look for it in the DOM:

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

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

... the way gambiarra:

widget.options = span.dataset;

... or the way ES6

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

Examples: link

score 2 · Answer 2

You can use the dataset property.

Ex:

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

The properties of the dataset can be read and written. link

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

score 2 · Answer 3

The logic for this would be quite 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 at a hierarchical level and separated by a period ("."). For example:

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

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

One of the ways of capturing "data- .." is .getAttribute("data-..") , as in my example. Or you could determine the value of data by .setAttribute("data-...", "novo valor") . In this case, the second option would have two arguments.