當我的JSON數據作為數據屬性從erb傳遞給Javascript時，為什么會丟失？

Question

我嘗試將Rails應用程序的Ruby部分中的一些內容（其中包括一個JSON對象）傳遞給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%> points.to_json <%=raw @points.to_json%> ，它也顯示得很好-因此這條紅寶石代碼很好地完成了工作-因此，在某處被作為數據屬性傳遞時丟失（而data-unit-id不會！）。

有人知道我在做什么錯嗎？

Answer 1

行情。 您生成的標記在語法上是無效的html。 屬性值過早結束， data-points="{"foo": 1}" 。 看到？ 您認為這是鍵foo的開頭引號，但實際上它是data-points值的結尾引號。

為避免這種情況，請在值中使用雙引號轉義：

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

或使用其他類型的引號將值引起來

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