在 html erb 模板中向 javascript 发送有效的 json答案

【问题标题】：Send valid json to javascript in html erb template在 html erb 模板中向 javascript 发送有效的 json
【发布时间】：2016-07-11 20:41:49
【问题描述】：

我有一个 erb 模板 index.html.erb。这将呈现一个 html 页面。然而，这个页面上也有一个图表，它需要一个 javascript 对象字面量来加载图表：

data: [
  {x: 'Resolved', y: 0 },
  {x: 'Unresolved', y: 0 }
]

为了将数据传递给index.html.erb 中的javascript，我有一个如下所示的脚本标记：

<script>
  $(document).ready(function(){
      var data = "<%= @chart_manager.bar %>"
      console.log(data);
  })
</script>

chart_manager 的bar 方法只返回json：

  def bar
    data = []

    data << { x: 'Open', y: tasks.open}
    data << { x: 'Closed', y: tasks.closed }

    data.to_json.html_safe
  end

但是，当我加载页面时，我在 chrome 中收到错误：

Uncaught SyntaxError: Unexpected identifier

浏览器显示的数据如下所示：

var data = "[{"x":"Unresolved","y":0},{"x":"Resolved","y":0}]"

如何在 html erb 模板中向 javascript 发送正确的 json？

【问题讨论】：

去掉多余的引号。 "<%= @chart_manager.bar %>" 变为 <%= @chart_manager.bar %>。然后，您将立即获得您的数据。如果你真的需要它作为一个字符串而不是一个数组，你可以用单引号包裹它 '<%= @chart_manager.bar %>' 或字符串化它 JSON.stringify(data)。

【解决方案1】：

我认为您应该能够执行以下操作：

var data = JSON.parse('<%= @chart_manager.bar %>');

注意使用单引号代替双引号。

【讨论】：