Понимаю что задача в общем совсем не для фронта, но вот поставили...
Имеется некий продукт, цена на который зависит от кол-ва. Необходимо реализовать изменение цены "на лету", т.е. как только пользователь выбрал кол-во, от которого меняется цена, он тут же эту цену увидел.
На странице продукта выводится таблица, в которой как раз отображены все цены в зависимости от qty.
Ниже pen - как видно, я просто подставляю нужное значение цены из таблицы. (Первая часть неважна, это обработка кликов по контролам плюс-минус).
Такой топорный подход сработал бы, если бы у меня всегда было одинаковое кол-во вариаций цен при одинаковом же количестве продуктов. Т.е. всегда было бы так: до 3, от 3 до 6, от 6 до 10 и тд.
В реальности это не так, и вариаций может быть как 2, так и 3 или 7, и кол-ва после которых изменяются цены тоже разные.
Бакендщики почему то не горят желанием сделать нормальную реализацию на своей стороне, при этом специально для фронта вывели некое визуальное представление массива, который формируется циклом foreach в php.
Массив этот находится в DOM на каждой странице продукта и представляет собой дата-атрибут некоего DIV-a - в моем случае это data-tierjs. Я скопировал весь див один в один как он есть в DOM, на всякий случай -
<div id="data-tier-prices-js" data-tierjs="[{" qty":3,"price":40},{"qty":6,"price":35.99},{"qty":10,"price":30.99},{"qty":20,"price":27.99},{"qty":50,"price":25.99},{"qty":100,"price":22.99},{"qty":200,"price":20.99}]"="">
Текстом я его специально продублировал, на самом деле текста нет.
Теперь главный вопрос: реально ли преобразовать вот такое вот в нормальный js-массив, чтобы можно было обращаться к его элементам по индексу и таким образом корректно решить поставленную задачу?