Question

我的Rails应用程序中有一个包含select的表单。 select中的每个选项都有一个数据属性data-contact，其中包含我想在Javascript中使用的其他信息。信息采用JSON格式，因此如果您查看HTML代码，它看起来像这样：

<option data-contact="{"street"=>"Postbus 123", "street_number"=>"12", "zipcode"=>"6547 JN", "city"=>"Tilburg"}"></option>

现在我想从键中获取值，但是当您使用``JSON.parse''函数时，rails生成的JSON与Javascript所期望的JSON不同。它希望格式如下：

<option data-contact="{"street":"Postbus 123", "street_number":"12", "zipcode":"6547 JN", "city":"Tilburg"}"></option>

在Javascript中，我使用它来检索值：

  var json = $('#invoice_contact_id option:selected').attr('data-contact');
  details = JSON.parse(json);
  alert(details.street);

我该如何使这项工作？我应该以Javascript解析JSON的方式改变一些东西，还是应该改变Rails将数据格式化为JSON的方式？

Answer 1

我同意@Andy和@Java_user，但我也认为问题是你的输出json包含引号，所以你的option元素被解析为：

<option data-contact="{" street "=>" Postbus 123 ", " street_number "=>" 12 ", " zipcode "=>" 6547 JN ", " city "=>" Tilburg "}"></option>

为避免此问题，您可以使用base64编码对json数据进行编码，以便在页面上进行打印，并在通过JavaScript访问时进行解码：

<强> HTML

<option data-content="eyJzdHJlZXQiPT4iUG9zdGJ1cyAxMjMiLCAic3RyZWV0X251bWJlciI9PiIxMiIsICJ6aXBjb2RlIj0+IjY1NDcgSk4iLCAiY2l0eSI9PiJUaWxidXJnIn0="></option>

<强>的JavaScript

var b64 = $('#invoice_contact_id option:selected').attr('data-contact');
var json = window.atob(b64).replace(/\=\>/g, ':');    // And this removes the problem of '=>'
details = JSON.parse(json);
alert(details.street);

Answer 2

这将完成工作

var jsonString = $('#invoice_contact_id option:selected')
                    .attr("data-contact")
                    .split('=>')
                    .join(':');
var details = JSON.parse(jsonString);
alert(details.street);

从JSON数据属性获取键值

2 个答案: