Using Map method Generate JS variable array through data-set from woocommerce HTML variation

问题

This is the HTML, which is actually a variation drop-down of a woocommerce product:

<select id="license_type" class="license_type" name="license_type" data-attribute_name="attribute_pa_services" data-show_option_none="yes">
  <option value="">Select an Option</option>
  <option value="5-site-license" data-price="129" class="attached enabled">5 Site License</option>
  <option value="developerslicense" data-price="1499" class="attached enabled">Developers License</option>
  <option value="single-site-license" data-price="69" class="attached enabled">Single Site License</option>
</select>

Initially, in vanilla JS the hardcoded Price array was like this →

// var prices = [59, 236, 1475];

Rest of the code is here:

var SelectDropDown= document.querySelectorAll("license_type");
  var options = Array.from(SelectDropDown);
  console.log(options);
  const getPrice = (option) => option.dataset.price;
  const toNumber = (strPrice) => Number(strPrice);
  const prices = Array.from(options).map(toNumber);
  console.log(prices);

Objective: We have to create an array from data-price, which is getting values dynamically based on every single product page.

A different working solution was given here: Generate JS variable array through data-set from woocommerce HTML variation

But I am looking for more ways to learn. I am trying to the same with the map method.

Problem is that those console logs are generating empty arrays:

Looks like I am unable to pick up the value through data-price.

来源：https://stackoverflow.com/questions/58514945/using-map-method-generate-js-variable-array-through-data-set-from-woocommerce-ht

标签

javascript

woocommerce

dataset