无法从数据属性解析 JSON [重复]

Posted 2023-03-05

【中文标题】无法从数据属性解析 JSON [重复]

【英文标题】：Can't parse JSON from data attribute [duplicate]

【发布时间】：2020-06-17 02:44:09

【问题描述】：

我目前正在尝试从数据属性解析 JSON，但出现错误：

Uncaught SyntaxError: Unexpected token � in JSON at position 0

这是我的代码：

jQuery( document ).ready( function ( $ ) 
	let variations = $( "span" ).data( "variations" );

	$( JSON.parse( variations ) ).each( function ( index, variation ) 
		console.log( variation );
	 );
 );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-variations='["\ud83d\udc36","\ud83d\udc31"]'></span>

我不明白。我正在使用此函数在 php 中打印 JSON，但在这里我陷入了困境：

<span data-variations='<?= esc_html( json_encode( $variations ) ) ?>'></span>

【问题讨论】：

那么，variations的内容是什么？

当字符串以''或'['开头时，则使用jQuery.parseJSON进行解析；它必须遵循有效的 JSON 语法，包括引用的属性名称。无法解析为 javascript 值的字符串不会被转换。 -- 看起来jQuery已经为你解析好了，不需要再JSON.parse了。

@Zeljka 在这种情况下它被解释为 JSON（由 jQuery）。

@Zeljka ["\ud83d\udc36","\ud83d\udc31"] 是一个有效的 JSON。

@Zeljka：不，这不是那里发生的事情。它是一个有效的 JSON 字符串，因此，它被解析为一个 JOSN 字符串。

【参考方案1】：

您遇到此问题是因为 variations 已经具有解析值 as said in the doc ：

当字符串以''或'['开头时，则使用jQuery.parseJSON对其进行解析

jQuery( document ).ready( function ( $ ) 
	let variations = $( "span" ).data( "variations" );

	$( variations ).each( function ( index, variation ) 
		console.log( variation );
	 );
 );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-variations='["\ud83d\udc36","\ud83d\udc31"]'></span>

【讨论】：

请注意，这个 jQuery 行为不同于 native dataset property

假设它是有效的 JSON。这将返回一个字符串：data-data="'test':1"

【参考方案2】：

jQuery 注意到data- 属性的值是有效的JSON，所以你从.data("variations") 调用中得到一个解析的对象。不用自己解析。

【讨论】：

这种行为也许令人惊讶，但在这种情况下就是这样。

<...> 属性为 有效 JSON <...>