jQuery's从HTML解析JSON不起作用

jQuery's parseJSON from HTML not working

本文关键字：HTML 解析 JSON 不起作用 jQuery      更新时间：2023-09-26

尝试从HTML数据属性解析JSON时出错。这是我想要从解析JSON的div

echo '<div class="udropdown" data-elements=''{"option1" : "1", "option2" : "2" }''></div>';

这是jQuery部分（点击即可，因此$(this)是必需的）

var ele = jQuery.parseJSON($(this).data('elements'));

但我一直收到这个错误：

未捕获的SyntaxError：意外的令牌

来自jQuery.data:的文档

当数据属性是对象（以"｛"开头）或数组（以"["开头）时，jQuery.parseJSON用于解析字符串；它必须遵循有效的JSON语法，包括带引号的属性名称。如果该值不能解析为JavaScript值，则将其保留为字符串。

$(this).data('elements')将已经将字符串中的JSON解析为对象。

jQuery.parseJSON(object)相当于jQuery.parseJSON(object.toString())，它给了你jQuery.parseJSON("[object Object")。

只需跳过手动parseJSON步骤。jQuery已经为您完成了这项工作。

很可能您已经有一个解析过的对象了。在这种情况下，parseJSON试图将您的输入视为字符串，只要它已经是一个对象，它就会被视为以下字符串：

[object Object]

或类似的。然后它认为符号[是某个数组（它仍然是一个有效的JSON）的开头，而o正是它所不期望的，因为它必须是一个数字、布尔值，或者是'、"或{中的一个。

只需检查$(this).data('elements')的数据类型-它必须是一个对象。

尝试以下操作：

JSON.parse({})

将返回完全相同的错误。

$(this).data('elements')返回一个对象，这样您就不必解析任何内容，只需使用返回的ele，例如：

$('.udropdown').click(function(){
    var ele = $(this).data('elements');
    console.log(ele.option1, ele.option2);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="udropdown" data-elements='{"option1" : "1", "option2" : "2" }'>Click HERE</div>

相关文章：