Displaying data from JSON in a table What do you think of my code?  I know it is a little rough around the edges but as of two days ago I had no idea how to use jQuery or JavaScript.



$(document).ready(function () {

var json = {

    "205100": {
        "success": true,
            "data": {
            "type": "game",
                "name": "MasterKin",
                "steam_appid": 9000,
                "required_age": 40,
                "is_free": false,
                "controller_support": "full",
                "dlc": [212894, 212893, 208575, 208570]
        }
    }

};

var game_name = [];
for (var key in json) {
    if (json.hasOwnProperty(key)) {
        var item = json[key];
        game_name.push({
            ItemName: item.data.name //Changing the .name to .dlc or .type will then display that result

        });
    }
}
console.log(game_name);
var tr;
for (var i = 0; i &lt; game_name.length; i++) {
    tr = $('&lt;tr/&gt;');
    tr.append("&lt;td&gt;" + game_name[i].ItemName + "&lt;/td&gt;");

    $('table').append(tr);
}
});
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;table&gt;
    &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;

    &lt;/tr&gt;
&lt;/table&gt;
I don't know what the possible rest of your code looks like, so my opinion might be wrong. What I don't understand is why a lot of people use jQuery for the slightest bits nowadays. The display of the array could be done like this:

var table = document.getElementById("displayTable"); //give this ID to your table

for (var i = 0; i &lt; game_name.length; i++) {
    var row = table.insertRow(i);
    var cell = row.insertCell(0);
    cell.innerHTML = game_name[i].ItemName;
}


Update:

If you insist on using jQuery, cache the selector in a variable and re-use the variable. Overusing selectors can result in poor performance and since you're using the selector inside a loop this can easily occur.

var table = $('#displayTable');

for (var i = 0; i &lt; game_name.length; i++) {
    table.append("&lt;tr&gt;&lt;td&gt;" + game_name[i].ItemName + "&lt;/td&gt;&lt;/tr&gt;");
}


Furthermore, give useful names to variables. Names like tr or game_name are not meaningful, try tableRow and gameNames instead. I updated the JSFiddle working example.