javascript - 我在解析 JSON 时遇到错误

Question

我有这个示例 JSON 代码，我想用 jQuery AJAX 循环它，但由于某种原因，控制台上总是出错

这是 new_content.json 文件中的代码

[
    {
        "name": "Mehmet",
        "email": "mehmet@gmail.com"
    },
    {
        "name": "Fareed",
        "email": "fareed3242@yahoo.com"
    },
    {
        "name": "Jonathan",
        "email": "jonathan@gmail.com"
    }
]

这些是我的html

<div id="main">This is the original text when page loads</div>

<button id="button1" type="button">Update content with Ajax</button>

这是在 javascript 中

$(document).ready(function () {
    $("#button1").on('click', function () {
        $.ajax({
            type: "GET",
            url: "new_content.json",
            success: function (rawData) {
                var data = JSON.parse(rawData);
                var result = '';
                result += '<table> \
                                 <tr> \
                                        <th>name</th> \
                                        <th>email</th> \
                                    </tr> \
                                    <tr>';
                $.each(data, function (i, item) {
                    result += "<tr><td>" + item[i].name + "</td>";
                    result += "<td>" + item[i].email + "</td></tr>";
                });
                result += "</tr></table>";
                $("#main").html(result);
            }
        });
    });
});

Answer 1

有2个错误

1. 首先删除 JSON.parse() 你不需要解析它。
2. 迭代数据 item[i].name 不正确，它应该是 item.name 和 item.email。

除了上面列出的 2 个之外，如果这不是拼写错误，您也缺少 .each 的右括号。

运行下面的命令，一切都会好起来的，我刚刚在我的本地机器上确认了

$(document).ready(function () {
        $("#button1").on('click', function () {
            $.ajax({
                type: "GET",
                url: "my.json",
                success: function (rawData) {
                    var data = rawData;

                    var result = '';
                    result +=
                        '<table> \
                                <tr> \
                                        <th>name</th> \
                                        <th>email</th> \
                                    </tr> \
                                    <tr>';
                    $.each(data, function (i, item) {
                        result += "<tr><td>" + item.name + "</td>";
                        result += "<td>" + item.email + "</td></tr>";
                    });
                    result += "</tr></table>";
                    $("#main").html(result);
                }
            });
        });
    });