遍历JSON数组:未捕获的语法错误,未捕获的引用错误

JavascriptLoser

我对JQuery还是很陌生,我试图用它遍历JSON数组并使用该数组中的数据更新我的网页。

JSON文件如下所示:

[
    {
        "firstname":"John",
        "lastname":"Doe",
        "studentnumber":"666"
    },
    {
        "firstname":"Foo",
        "lastname":"Bar",
        "studentnumber":"777"
    }
]

我的HTML文档如下所示:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="jquery-2.2.3.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                console.log('ready');
                $.getJSON('us.json', function(data){
                    $.each(JSON.parse(data), function(key, value){
                       $.each(value, function(index, member){
                            html += '<div class="member">';
                            html += '<h4>' + member.firstname + ' ' + member.lastname +'</h2>';
                            html += '<p>' + 'has the following member number:' + member.studentnumber + '</p>';
                            html += '</div>';
                            console.log(html)
                        })
                    });
                    $('#members').html(html);
                });
            });
        </script>
    </head>

    <body>
        <div>
            <h3>Members</h3>
        </div>
        <div id="members"></div>
    </body>
</html>

您可以看到我正在尝试使用该.each功能来完成此任务。上面的代码给出了以下错误:

VM2028:1 Uncaught SyntaxError: Unexpected token o
(anonymous function) @ index-v1.html:10
fire                 @ jquery-2.2.3.js:3187
self.fireWith        @ jquery-2.2.3.js:3317
done                 @ jquery-2.2.3.js:8785
(anonymous function) @ jquery-2.2.3.js:9151

在查看了之前的一些问题之后,我尝试用JSON.parse(data)just进行替换data,这导致了以下错误:

Uncaught ReferenceError: html is not defined
(anonymous function) @ index-v1.html:12
jQuery.extend.each   @ jquery-2.2.3.js:371
(anonymous function) @ index-v1.html:11
jQuery.extend.each   @ jquery-2.2.3.js:365
(anonymous function) @ index-v1.html:10
fire                 @ jquery-2.2.3.js:3187
self.fireWith        @ jquery-2.2.3.js:3317
done                 @ jquery-2.2.3.js:8785
(anonymous function) @ jquery-2.2.3.js:9151

是什么原因导致这些问题的,我该如何解决?

杜沙尔

错误原因:JSON.parse()需要文本但传递了对象。(感谢@人造丝

由于data已经采用JSON格式,因此无需对其进行使用JSON.parse()

$.getJSON('us.json', function(data){

    // Problem is here
    $.each(JSON.parse(data), function(key, value) {

不解析 data

$.getJSON('us.json', function(data) {
    $.each(data, function(key, value) {

对于第二个错误

未捕获的ReferenceError:未定义html

html使用前定义变量。

var html = ''; // Add before `each`.

同样,也不需要嵌套,each因为首先传入的数据each已经是member对象。这是使用编写的代码Array#forEach

$.getJSON('us.json', function (data) {
    var html = '';
    data.forEach(function(member) {
        html += '<div class="member">';
        html += '<h4>' + member.firstname + ' ' + member.lastname + '</h2>';
        html += '<p>' + 'has the following member number:' + member.studentnumber + '</p>';
        html += '</div>';
    });

    $('#members').html(html);
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

未捕获的引用错误:未定义$?

未捕获的引用错误:未定义tinymce

错误“未捕获的语法错误:输入的意外结束”

Rails 6:未捕获的引用错误-未定义$

mongorestore未捕获的异常:语法错误

未捕获的引用错误(无法读取JSON文件)

从JSP调用EXTJS方法时发生未捕获的类型错误和未捕获的引用错误

javascript json未捕获的语法错误意外的令牌非法

Firefox与Chrome未捕获的语法错误意外的令牌错误

angularjs中未捕获的语法错误

递归遍历json对象导致“未捕获的语法错误:非法的return语句”

JSON解析:未捕获的语法错误:意外的令牌e

未捕获的语法错误意外令牌

JavaScript 错误 - 未捕获的语法错误:意外标记 {

未捕获的语法错误 JSON.parse

未捕获的引用错误:未定义 newMoney

错误未捕获语法错误:意外标记{

未捕获的语法错误:JSON 输入意外结束 [}

未捕获的语法错误意外令牌

未捕获的语法错误:无效或意外的令牌。引用问题?

未捕获的语法错误:“意外的标记 {”

无法解决未捕获的引用错误

未捕获的语法错误;意外的令牌 <

未捕获的语法错误:意外的标记“<”

Wordpress 致命错误:未捕获错误:语法错误

未捕获的语法错误:意外的标记“!”

Firebase:未捕获的语法错误:无效或意外的令牌 -> 未捕获的引用错误

React.scala 中的 ScalaJSReact 未捕获的引用错误

未捕获的语法错误:意外的标记“var”错误