var loadHeros = function(){

    //Get json asynchronously
    $.ajax({
        dataType: "json",
        url: "data/herosJSON.json",
        mimeType: "application/json",

        success: function(result){

            //The table element on hero's page.
            var table = $('#heroTable');

            //Loop through each object in JSON appending them
            $.each(result, function(i, obj){

                $('#heroTable').append($(
                    "<tr><td>" + obj.TITLE + "</td>" +
                    "<td>" + obj.SUBJECT + "</td>" +
                    "<td>" + obj.SOURCE + "</td>"+
                    "<td>" + result[i].PUBL.DATES + "</td>"+
                    "<td>" + obj.HISTORY + "</td>"+
                    "<td>" + obj["DESCRIPT."] + "</td>"+
                    "<td>" + obj.SUBJECT + "</td></tr>"
                ));
            });

            //Log json to check it's there
            //console.log(result);
        }

    });

}