使用JQuery解析JSON字符串时出错

Question

我试图从JSON字符串读取值并使用JavaScript alert()语句显示其中的一些值。 但是我在控制台中遇到异常。

请指导。

控制台例外

SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
...dc=/\?/;n.parseJSON=function(a){return JSON.parse(a+"")},n.parseXML=function(a){...

at jquery.min.js(line 4, col 5304)

process.js

$(document).ready(function () {
    //for handling json data
    var json = $("#studentJsonDiv").data("students-json");
    console.log(json);
    $.each($.parseJSON(json), function (idx, obj) {
        alert(obj.name);
    });
});

针对home.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/process.js"></script>
    </head>
    <body>
        From JQuery (JSON): <div id="studentJsonDiv" data-students-json='${studentsJson}'></div>
    </body>
</html>

查看home.jsp的页面源

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/process.js"></script>
    </head>
    <body>
        From JQuery (JSON): <div id="studentJsonDiv" data-students-json='[{"id":1,"name":"Jack"},{"id":2,"name":"Jill"}]'></div>
    </body>
</html>

Answer 1

从jQuery 1.6开始， .data()方法会解析值，因此删除$.parseJSON() 。 您正在解析导致错误的对象而不是字符串。 另外检查 - 为什么jQuery会自动解析我的data- *属性？

每次尝试都将字符串转换为JavaScript值（这包括布尔值，数字，对象，数组和null）。 如果这样做不会更改值的表示，则只将值转换为数字。 例如，“1E02”和“100.000”等同于数字（数值100），但转换它们会改变它们的表示形式，因此它们将保留为字符串。 字符串值“100”被转换为数字100。

当data属性是一个对象（以'{'开头）或数组（以'['开头）时，则使用jQuery.parseJSON来解析字符串; 它必须遵循有效的JSON语法，包括引用的属性名称。 如果该值不能作为JavaScript值进行解析，则将其保留为字符串。 （摘自https://api.jquery.com/data/ ）

 $(document).ready(function() { //static message var msg = "Hello World from JQuery!"; $("#mydiv").text(msg); //dynamic message processing for displaying value in div element var students = $("#studentDiv").data("students"); $("#studentDiv").text(students); //for handling json data var json = $("#studentJsonDiv").data("students-json"); // change value here ---------------^------^------ console.log(json); $.each(json, function(idx, obj) { alert(obj.name); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="mydiv"></div> From JQuery: <div id="studentDiv" data-students="[Student{id=1, name=Jack}, Student{id=2, name=Jill}]"></div> From JQuery (JSON): <div id="studentJsonDiv" data-students-json='[{"id":1,"name":"Jack"},{"id":2,"name":"Jill"}]'></div>

Answer 2

您获得的数据是一个对象数组。 你只需要迭代它，而不必再次解析它。 另外，正确的属性名称。

var json = $("#studentJsonDiv").data("students-json");
$.each(json, function (idx, obj) {
    alert(obj.name);
});

Answer 3

如果你正在解析

[Student{id=1, name=Jack}, Student{id=2, name=Jill}]

它丢失了:在学生之后。

Answer 4

您需要在数据中使用students-json ，因为这是您拥有json数据的地方

var json = $("#studentJsonDiv").data("students-json");
$.each($.parseJSON(json), function(idx, obj) {
    alert(obj.name);
});

使用JQuery解析JSON字符串时出错

问题描述

4 个解决方案

解决方案1
2 已采纳 2015-10-15 18:59:18

解决方案2
1 2015-10-15 19:02:33

解决方案3
0 2015-10-15 18:51:31

解决方案4
0 2015-10-15 18:59:14

使用JQuery解析JSON字符串时出错

问题描述

4 个解决方案

解决方案1 2 已采纳 2015-10-15 18:59:18

解决方案2 1 2015-10-15 19:02:33

解决方案3 0 2015-10-15 18:51:31

解决方案4 0 2015-10-15 18:59:14

解决方案1
2 已采纳 2015-10-15 18:59:18

解决方案2
1 2015-10-15 19:02:33

解决方案3
0 2015-10-15 18:51:31

解决方案4
0 2015-10-15 18:59:14