table 不是从本地 json 文件构造的

Question

所以我试图整理我的代码，但遇到了一些障碍。我需要做的是让一组 JSON 数据自动填充一个 table。我有一个杂乱的概念证明确实有效，但我想分开 JSON 文件以获得更大的灵活性。第一个示例效果很好，但第二个显示什么都没有。我在 chrome 的控制台中也没有收到任何错误。

什么有效：

$(document).ready(function () {
    var json = [
    {
        "id": 358,
        "cover": {
            "id": 97418,
            "image_id": "co2362"
        },
        "name": "Super Mario Bros.",
        "summary": "A side scrolling 2D platformer and first entry in the Super Mario franchise, Super Mario Bros. follows Italian plumber Mario as he treks across many levels of platforming challenges featuring hostile enemies to rescue Princess Peach from the evil king Bowser."
    },
    {
        "id": 1067,
        "cover": {
            "id": 89020,
            "image_id": "co1wos"
        },
        "name": "Super Mario Bros. 2",
        "summary": "Super Mario Bros. 2, 2D platformer and sequel to Super Mario Bros. (1985), features 4 selectable characters (Mario, Luigi, Princess Peach, Toad) as they navigate the dream world of Subcon to defeat the evil toad king Wart. Super Mario Bros. 2 features different ways interacting with enemies and the world, including an object carrying mechanic and more intricate level designs."
    },
    {
        "id": 1068,
        "cover": {
            "id": 97916,
            "image_id": "co23jw"
        },
        "name": "Super Mario Bros. 3",
        "summary": "Super Mario Bros. 3, the third entry in the Super Mario Bros. series and Super Mario franchise, sees Mario or Luigi navigate a nonlinear world map containing platforming levels and optional minigames and challenges. The game features more diverse movement options and new items alongside more complex level designs and boss battles."
    },
    {
        "id": 145825,
        "cover": {
            "id": 173250,
            "image_id": "co3poi"
        },
        "name": "Family Feud",
        "summary": "Based on the television game show, Family Feud pits two teams of five against one another as they attempt to guess the top answers to survey questions. The winning team advances to the Fast Money round where they have two tries to guess answers to five questions as a timer counts down. Players can challenge the computer or a friend and name their team."
    }
]

        
    console.log(json);
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');

        tr.append("<td>" 
        + '<div class="image">'    
        + '<img src = "https://images.igdb.com/igdb/image/upload/t_cover_big/' 
        + json[i].cover.image_id 
        + ".png" 
        + '"></img'
        + "</div>" 
        + "</td>");

        tr.append("<td>" 

        + '<div class="name">' 
        + json[i].name 
        + "</div>" 

        + '<div class="summary">'
        + json[i].summary 
        + "</div>" 

        + "</td>");
        
        $('table').append(tr);
    }
});

什么不起作用：

$(document).ready(function () {

        // FETCHING DATA FROM JSON FILE
        $.getJSON("./nes.json",
                function (data) {
            var json = "";
            var tr;
        // build the table
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');

        tr.append("<td>" 
        + '<div class="image">'   
        + '<img src = "https://images.igdb.com/igdb/image/upload/t_cover_big/' 
        + json[i].cover.image_id
        + ".png" 
        + '"></img'
        + "</div>" 
        + "</td>");

        tr.append("<td>" 

        + '<div class="name">' 
        + json[i].name 
        + "</div>" 

        + '<div class="summary">'
        + json[i].summary 
        + "</div>" 

        + "</td>");
        
        $('table').append(tr);
        
    }})});

我哪里错了？

Answer 1

来自 nes.json 文件的数据被加载到 data 变量中，但是您在 for 循环中使用空字符串变量 json 而不是 data.

最简单的解决方法是替换

function (data) {
  var json = "";

和

function (json) {

table 不是从本地 json 文件构造的

table not being constructed from local json file

html

javascript

json