如何从元素querySelector中提取数据
如何从元素querySelector中提取数据
提问于 2022-09-07 10:00:14
我正在将数据数组从jQuery脚本传递到html元素，并尝试从元素中提取数据，以便在常规的javaScript脚本中使用。在控制台中，我看到正在传递的数据。使用querySelector，我可以得到整个构造，但不能将数组从构造中取出。
数据如下：
[{"zone":"alessandros_office","value":76},
{"zone":"it_closet","value":72},
{"zone":"kitchen","value":79},
{"zone":"main_conference_room","value":152},
{"zone":"neils_office","value":58},
{"zone":"training_room","value":29}]这是接收数据的html元素：
<div id="bubbleData" data-type="text" data-visitors=""></div>这是在AJAX调用之后将数据传递给div的jQuery函数。
this.Update = function (data) {
if (_.isUndefined(data) || _.isNull(data)) {
data = {};
}
console.log('Bubble js data: ', data);
this.BubbleChart.Update(data);
//$('#bubbleData').attr('data-visitors', data);
};在javascript脚本中，我提取数据并将其显示在console.log中，如下所示：
const bubble = document.querySelector('[data-visitors]');
var data = bubble.dataset;
console.log('Visitor Data: ', data);在控制台里我看到：
Visitor Data:
DOMStringMap {id: 'visit', visitors: ''}
id: "visit"
visitors: "[{\"zone\":\"alessandros_office\",\"value\":76},{\"zone\":\"it_closet\",\"value\":72},{\"zone\":\"kitchen\",\"value\":79},{\"zone\":\"main_conference_room\",\"value\":152},{\"zone\":\"neils_office\",\"value\":58},{\"zone\":\"training_room\",\"value\":29}]"根据mdm web docs https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes，我应该能够用‘冒泡’访问‘访问者’数据，但是其中的一个console.log却是空的。如何提取访客数据？
回答 2
Stack Overflow用户
发布于 2022-09-07 10:02:42
使用data()方法更新数据的
不影响DOM中的属性。若要设置数据-*属性值，请使用attr。
您不能使用标准的DOM读取使用jQuery的data存储的数据。它在内部将其存储到jQuery，而不是存储在DOM中。
Stack Overflow用户
发布于 2022-09-07 12:36:28
我怀疑JSON和Javascript对象之间存在误解。
这段代码说明了不同之处。
data = [{"zone":"alessandros_office","value":76},
{"zone":"it_closet","value":72},
{"zone":"kitchen","value":79},
{"zone":"main_conference_room","value":152},
{"zone":"neils_office","value":58},
{"zone":"training_room","value":29}];
function fnGetData(){
$('#bubbleData').data('visitors',JSON.stringify(data));
var objData = $('#bubbleData').data('visitors');
var json = $.parseJSON(objData);
var strData = JSON.stringify(objData);
console.log(strData);
var jsonData = $.parseJSON(strData);
console.log(jsonData);
console.log(json[2].zone);
// Show the string data the way you are currently seeing it.
console.log(JSON.stringify(objData));
console.log(json[2].zone);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="fnGetData()">getdata</button>
<div id="bubbleData" data-visitors=""></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73639810
复制相关文章
相似问题
腾讯云开发者
