如何在JQuery中将HTML数据属性转换为JSON? [英] How to convert HTML data attribute to JSON in JQuery?
问题描述
我在HTML的隐藏元素中使用JSON以避免多个不必要的AJAX请求. JSON生成正确，但我无法使用JQuery处理它，因此可以使用它.
I use JSON in hidden element in HTML to avoid multiple unnecessary AJAX requests. JSON is generated properly but I can't handle it using JQuery so I can work with it.
问题是elem.data("json")返回的是对象而不是字符串，因此parseJSON表示在字符串的开头出现意外的o.
The problem is that elem.data("json") returns an object instead of string so parseJSON says that there is unexpected o at the start of the string.
$(document).ready(function () {
console.log($('#locations-json').data('json'));
console.log(JSON.parse($('#locations-json').data('json'))); # tried parseJSON
$('.class-destination-from').change(function () {
$.when(get_destination_from_state(),function(res){
//if (res=='city'){
//
//}elif(res=='airport'){
// pass
//}elif(res=='empty'){
// pass
//}
});
})
});
控制台
对象{城市:"[1、2、3、4]"，机场:"[5、6]"} VM1345:1未捕获 SyntaxError:JSON中位置1处的意外令牌o
Object {cities: "[1, 2, 3, 4]", airports: "[5, 6]"} VM1345:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1
这是HTML的一部分:
This is the part of HTML:
<div id="locations-json" data-json="{"cities": "[1, 2, 3, 4]", "airports": "[5, 6]"}" style="display: none"></div>
您知道如何正确转换吗?
Do you know how to convert it properly?
推荐答案
The problem, as it so often is, is that data isn't what most people think it is. data is not an accessor for data-* properties, it's both more and less than that. It manages jQuery's internal data cache for the element. It initializes that cache from data-* attributes, but it duplicates the data in the cache, processes the data, and never writes back to the attributes.
在这种情况下，正是正在处理数据"对您造成打击:data自动检测到您正在读取的是JSON并为您解析 .因此，您将获得一个对象，而无需解析它.
It's that "processing the data" that's hitting you in this case: data automatically detects that what you're reading is JSON and parses it for you. So you'll get back an object, and don't need to parse it.
因此使用data:
var locations = $("#locations-json").data("json");
console.log(locations);
console.log("There are " + locations.cities.length + " cities");
<div id="locations-json" data-json="{"cities": "[1, 2, 3, 4]", "airports": "[5, 6]"}" style="display: none"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
正如您在评论中指出的那样，那里有12个城市.这是因为JSON为cities(和airports)提供了 string 值:
As you noted in a comment, that says there are 12 cities. That's because the JSON gives cities (and airports) a string value:
{"cities": "[1, 2, 3, 4]", "airports": "[5, 6]"}
您可能希望JSON为:
You probably meant the JSON to be:
{"cities": [1, 2, 3, 4], "airports": [5, 6]}
示例:
var locations = $("#locations-json").data("json");
console.log(locations);
console.log("There are " + locations.cities.length + " cities");
<div id="locations-json" data-json="{"cities": [1, 2, 3, 4], "airports": [5, 6]}" style="display: none"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
但是，除非您需要data的各种功能，否则只需使用 attr 并进行解析你自己:
But unless you need the various features of data, just use attr and parse yourself:
var locations = JSON.parse($("#locations-json").attr("data-json"));
console.log(locations);
console.log("There are " + locations.cities.length + " cities");
<div id="locations-json" data-json="{"cities": [1, 2, 3, 4], "airports": [5, 6]}" style="display: none"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
注意:
截至此修改，您的问题中的有效div如下所示:
As of this edit, your question had a valid div that looked like this:
<div id="locations-json" data-json="{"cities": "[1, 2, 3, 4]", "airports": "[5, 6]"}" style="display: none"></div>
但是随后您再次对其进行了编辑，看起来像这样，这是无效的:
But then you edited it again to look like this, which is invalid:
<div id="locations-json" data-json="{"cities": "[1, 2, 3, 4]", "airports": "[5, 6]"}" style="display: none"></div>
带有"的版本是正确的，请确保使用该版本.
The version with " is correct, be sure to use that.
这篇关于如何在JQuery中将HTML数据属性转换为JSON?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
