为什么我的 JSON 数据在作为数据属性从 erb 传递到 Javascript 时会丢失？答案

【问题标题】：Why does my JSON data get lost when passed as a data attribute from erb to Javascript?为什么我的 JSON 数据在作为数据属性从 erb 传递到 Javascript 时会丢失？
【发布时间】：2017-03-29 15:50:37
【问题描述】：

我尝试将一些东西（其中一个 JSON 对象）从我的 Rails 应用程序的 Ruby 部分传递到 Javascript 文件，并尝试使用 HTML 数据属性。

在 .html.erb 文件中：

<div id='myDiv' data-points="<%=raw @points.to_json%>" data-unit-id="<%=@unit_id%>" >
</div>

在 .js 文件中：

var myDiv = document.getElementById("myDiv");
console.log(map_canvas.getAttribute("data-unit-id"));
console.log(map_canvas.getAttribute("data-points"));

Data-unit-id 确实在控制台日志中正确显示。但是，作为 JSON 对象的数据点仅在控制台日志中显示如下：

当我从 html.erb 端登录 <%=raw @points.to_json%> 时，它也显示得很好 - 所以这段 ruby 代码可以很好地完成它的工作 - 所以在某个地方作为数据属性传递时它会丢失（和 @ 987654325@ 没有！）。

有人知道我做错了什么吗？

【问题讨论】：

标签： javascript ruby-on-rails json erb

【解决方案1】：

行情。您生成的标记在语法上是无效的 html。属性值提前结束，data-points="{"foo": 1}"。看？您认为它是关键 foo 的开场引号，但实际上它是 data-points 值的结束引号。

为避免这种情况，请在值中转义双引号：

data-points="{\"foo\": 1}"

或使用其他类型的引号将值括起来

data-points='{"foo": 1}'

【讨论】：