Это HTML, который на самом деле представляет собой выпадающий вариант продукта woocommerce:
<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>
Изначально в vanilla JS массив цен с жестким кодом выглядел следующим образом: *
// var prices = [59, 236, 1475];
Остальная часть кода здесь:
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);
Цель: нам нужно создать массив из data-price, который будет получать значения динамически на основе каждой отдельной страницы продукта.
Aздесь было дано другое рабочее решение: Создать массив переменных JS с помощью набора данных из HTML-варианта woocommerce
Но я ищу другие способы изучения . Я пытаюсь сделать то же самое с помощью метода map .
Проблема заключается в том, что эти журналы консоли генерируют пустые массивы:
Похоже, я не могу подобрать значение через data-price.