table not being constructed from local json file-CodePudding

So I'm trying to tidy my code up but hitting a bit of a snag. What I need to do is have a set of JSON data automatically fill a table. I have a messy proof of concept that does work, but I want to separate the JSON file for more flexibility. The first example works great, but the second display's nothing. I'm also getting no errors in chromes' console.

what works:

$(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 >'    
          '<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 >' 
          json[i].name 
          "</div>" 

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

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

What doesnt work:

$(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 >'   
          '<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 >' 
          json[i].name 
          "</div>" 

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

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

Where am i going wrong?

CodePudding user response：

The data from nes.json file is loaded into data variable, however you are using an empty string variable json in the for loop instead of data.

The simplest fix is to replace

function (data) {
  var json = "";

with

function (json) {