CODEWITHSUNDEEP
javascriptjqueryarrays
Rebecca O'Riordan
Rebecca O'Riordan

Reputation: 883

Grab unique data attribute values and create key-value array from these?

I have a number of data-attributes on page which will have different values, but there will be duplicates of these values, for example:

<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Old-75]"></div>

I want to loop through and grab each unique value ('[Adult-Young-25]','[Adult-Mid-35]','[Adult-Old-75]') and split these up to pass to an array as key-value pairs like:

var array = {"Adult Young": "25", "Adult Mid": "35", "Adult Old": "75"};

I'm struggling to 1. grab one instance of each repeated data value, and 2. to 'split' the value to map as key-value pairs.

Upvotes: 0

Views: 807

Answers (3)

pbialy
pbialy

Reputation: 1083

Here's a simple solution without any fancy libraries or functions:

var divs = document.getElementsByTagName('div');
var myAttr = 'data-user-val';
var dict = {};

for(i = 0; i < divs.length; i++) {
  var val = divs[i].getAttribute(myAttr);
  if (val) {
    var trimmed = val.substr(1, val.length - 2)
    var splitted = trimmed.split('-');
    var key = splitted[0] + ' ' + splitted[1];
    if (!dict.hasOwnProperty(key)) {
      dict[key] = splitted[2];
    }
  }
}

Upvotes: 0

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

var obj = {};

$('div').each(function(){
  var data_attrivute_value = $(this).data('user-val');
  data_attrivute_value = data_attrivute_value.substring(1,data_attrivute_value.lastIndexOf("]"));
  var exploded_string = data_attrivute_value.split('-');
  obj[exploded_string[0]+' '+exploded_string[1]] = exploded_string[2];
});

console.log(obj);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Old-75]"></div>

Upvotes: 2

Ori Drori
Ori Drori

Reputation: 192592

Use document.querySelectorAll() to get all elements with the data-user-val attribute, and spread to array. Iterate the array with Array.reduce(), and get the value of the attribute. Use String.match() to get the non numeric (key) and the numeric (value) parts of the value. Assign the key and value to the object.

const result = [...document.querySelectorAll('[data-user-val]')]
  .reduce((r, el) => {
    const [, k, v] = el.getAttribute('data-user-val').match(/([^\d\[]+)(\d+)/);
    
    r[k.replace(/-/g, ' ').trim()] = v;
    
    return r;
  }, {});
  
console.log(result);
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Old-75]"></div>

Upvotes: 0

Related Questions