时间戳

首页 > 解决方案 > 如何使用 jQuery data() 访问对象数组中的所有对象

javascript - 如何使用 jQuery data() 访问对象数组中的所有对象

问题描述

我正在尝试使用 jQuery 的data()选择器（在 Freemarker 模板中）将 yaml 数据传递给 JS。因此，虽然我能够传递“浅”键/值对，但传递对象/hasmaps 的数组/序列并不能真正完成这项工作，我得到一个字符串，该字符串不能使用或转换为常规数组对象：

自由标记

<#local xAxis=20 />
<#local data=content.data /> // A yaml sequence containing two hashmaps
<#local config='{"xAxis": ${xAxis}, "data": "${data}"}' /> //quotations for parsing to stop config becoming a string
   <div id="" data-js-config='${config}'>

JS

const config = $("[data-js-config]").data("js-config")
console.log(config)

结果是数据数组变成了我不能使用的字符串：
{xAxis: 20, data: "[{key1=value1},{key2=value2}]"}

我希望将数据字符串转换为带有键/值对对象的常规数组，就像将 xAxis 转换为键/值对一样。

将不胜感激任何帮助，谢谢！

标签： javascriptjqueryjsonyamlfreemarker

解决方案

content.data 不能是

[{key1=value1},{key2=value2}]

但需要

[{"key1":"value1"},{"key2":"value2"}]

然后它会工作

const config = $("[data-js-config]").data("js-config")
console.log(config)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="" 
data-js-config='{"xAxis": 20, "data": [{"key1":"value1"},{"key2":"value2"}]'></div>

如果没有，您是否需要 ${data} 周围的双引号，并且您需要解析 config.data 字符串

推荐阅读