如何使用javascript中创建的对象在html中创建表？

Question

I've started working with web development, specifically working with JavaScript and node.js, and created a web scraper. Currently, it takes data from http://www.dotamax.com (stats page for the video game DOTA 2) and creates an object which contains win rate, pick rate, and an arbitrary score that the code assigns to each hero. The JavaScript works, but now I'm lost in using the code inside a webpage. I created a local web server on my machine so I could use the JavaScript file within an html file but I'm not sure what is the best to go about creating a table inside html using the object in the JavaScript. Any sort of direction would be really helpful! Here's the code for my JavaScript file, the object I want to put in a table is heroObjs.

var request = require('request');
var cheerio = require('cheerio');

// list that will iterate through every skill level. used in the url
skillLevels = {
  'Very high': 'vh',
  'High': 'h',
  'Normal': 'n'
};

heroes = ['pudge', 'windrunner', 'nevermore', 'earthshaker', 'lina','pudge',
   'queenofpain', 'invoker', 'antimage', 'juggernaut', 'alchemist',
   'doom_bringer', 'tusk', 'rubick', 'bounty_hunter', 'slark',
   'storm_spirit', 'ember_spirit', 'spectre', 'spirit_breaker', 'silencer',
   'legion_commander', 'lion', 'phantom_assassin', 'mirana', 'zuus',
   'undying', 'rattletrap', 'templar_assassin', 'bloodseeker',
   'witch_doctor', 'crystal_maiden', 'gyrocopter', 'dazzle','winter_wyvern',
   'necrolyte', 'ancient_apparition', 'ogre_magi', 'skeleton_king',
   'phantom_lancer', 'axe', 'magnataur', 'tiny', 'riki', 'slardar',
   'earth_spirit', 'leshrac', 'furion', 'sand_king', 'omniknight',
   'huskar', 'disruptor', 'tinker', 'ursa', 'bristleback', 'sniper',
   'venomancer', 'nyx_assassin', 'life_stealer', 'clinkz', 'vengefulspirit',
   'skywrath_mage', 'kunkka', 'lich', 'faceless_void', 'dark_seer', 'techies',
   'jakiro', 'abaddon', 'phoenix', 'sven', 'shadow_shaman', 'luna', 'viper',
   'enigma', 'shredder', 'weaver', 'tidehunter', 'night_stalker', 'medusa',
   'chaos_knight', 'puck', 'drow_ranger', 'centaur', 'keeper_of_the_light',
   'pugna', 'dragon_knight', 'warlock', 'morphling', 'broodmother','meepo', 'terrorblade', 'treant', 'razor', 'bane', 'batrider',
   'death_prophet', 'troll_warlord', 'wisp', 'shadow_demon', 'naga_siren',
   'obsidian_destroyer', 'enchantress', 'lone_druid', 'beastmaster',
   'lycan', 'oracle', 'brewmaster', 'elder_titan', 'visage', 'chen'
   ];

// creates a multidimensional object that holds hero stats
var heroObjs = {};
for (var i = 0; i < heroes.length; i++) {
   var hero = heroes[i];
   if (hero in heroObjs == false) {
     heroObjs[hero] = {
       "Very high": {
         "Pick Rate": null,
         "Win Rate": null,
         "Score": null
       },
       "High": {
         "Pick Rate": null,
         "Win Rate": null,
         "Score": null
       },
       "Normal": {
         "Pick Rate": null,
         "Win Rate": null,
         "Score": null
       },
     };
   }    
 }

for (skills in skillLevels) {
   var url = "http://www.dotamax.com/hero/played/?skill=" + skillLevels[skills];
   request(url, (function (skills) {
     return function (err, resp, body) {
       if (err)
         throw err;
        $ = cheerio.load(body);
       //creates the score and gets win rate and pick rate from dotamax.com
       //currently only fills score for very high skill bracket
       $("tbody tr").each(function (hero) {
         $(this).find('td div:contains("%")').each(function () {

           var containsPickRate = $(this).parent().parent().find("td").eq(1).toString();
      var containsHeroName = $(this).parent().parent().toString();
      var pickRateIndex = containsPickRate.indexOf('10px">') + 6;
      var endPickRateIndex = containsPickRate.indexOf('</div>');
      var heroNameIndex = containsHeroName.indexOf("detail/") + 7;
      var endHeroNameIndex = containsHeroName.indexOf('&apos;)" style');
      var heroName = containsHeroName.substring(heroNameIndex, endHeroNameIndex);
      var pickRate = containsPickRate.substring(pickRateIndex, endPickRateIndex);
      pickRate = pickRate.split(',').join("");
      var winRate = parseFloat($(this).text());
      pickRate = parseFloat(pickRate);
      if (heroName in heroObjs == true) {
        heroObjs[heroName][skills]["Pick Rate"] = pickRate;
        heroObjs[heroName][skills]["Win Rate"] = winRate;
        if (skills === "Very high") {
          var winRateCont = 1.4 * .01 * Math.pow(winRate, 2)
          var pickRateCont = .8 * ((10775 / (100 + 1090 * Math.pow(Math.E, -.000005 * pickRate))) - 8.3)
          heroObjs[heroName][skills]["Score"] = (pickRateCont + winRateCont)
        }
      }
    })
  });
}
   })(skills));
 }

 //waits 10 seconds to display heroObjs which is approximate time 
 //it takes for the previous function to fill heroObjs
 setTimeout(function () {
    console.log(heroObjs);
  }, 10000);

Answer 1

First off, your best choice is to use an established Javascript framework that does this for you. For instance, jQuery and/or angular.js.

For instance, with angular.js, you would simply do something like:

<table>
  <tr data-ng-repeat="hero in heroObjs">
    <td>{{hero.attr1}}</td>
  </tr>
</table>

Angular will take care of the rest. It will parse your data, and build the html for you. It takes a while to understand a framework like angular or jQuery, but the time is well spent. Maintaining your own library of functions to do anything similar is a big waste of time, and you will spend more time debugging than building.