Question

我还是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)替换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

可能导致这些问题的原因以及如何解决这些问题？

Answer 1

错误原因： JSON.parse()需要文本，但会传递对象。 （感谢@ Rayon）

由于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);
});

循环通过JSON数组：未捕获的语法错误，未捕获的引用错误

1 个答案: