Как нацелиться на объект в div в vanilla js

Question

Я пытаюсь поместить часть данных в переменную javascript, и я не знаю, как нацелиться на нее. Данные находятся в объекте, который является частью div. Вот как это выглядит на html-странице

Я выделил предмет, на который пытаюсь нацелиться.

Вот что я пытался (и терпел неудачу):

let dataDiv = document.querySelector(" .bc-product-form__options  > div : data-variants");
console.log( dataDiv : data-variants);

Как получить этот объект в переменную js?

Answer 1

Вы можете просто выбрать div по соответствующему атрибуту (в этом случае вы хотите data-js="product-variants-object", а затем использовать getAttribute и JSON.parse для извлечения и анализа данных.

let div = document.querySelector('div[data-js="product-variants-object"]');
let data = JSON.parse(div.getAttribute('data-variants'));
console.log(data);

<div data-js="product-variants-object" data-variants='[{"key": "value"}]'></div>