如何使用在javascript中創建的對象在html中創建表格？

Question

我已經開始使用web開發，特別是使用JavaScript和node.js，並創建了一個web刮板。目前，它從http://www.dotamax.com（視頻遊戲DOTA 2的統計頁面）獲取數據，並創建一個包含勝利率，挑選率和代碼分配給每個英雄的任意得分的對象。 JavaScript的作品，但現在我迷失在使用網頁內的代碼。我在我的機器上創建了一個本地Web服務器，以便我可以在html文件中使用JavaScript文件，但我不確定在JavaScript中使用對象在html內創建表格的最佳方法。任何方向都會很有幫助！這裏是我的JavaScript文件的代碼，我想放在表中的對象是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

首先，您最好的選擇是使用一個既定的Javascript框架，爲您做到這一點。例如，jQuery和/或angular.js。

例如，對於angular.js，你只會做這樣的事情：

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

角將完成剩餘的工作。它會解析你的數據，併爲你建立html。理解像angular或jQuery這樣的框架需要一段時間，但是花費的時間很長。維護你自己的函數庫來做類似的事情是很浪費時間的，你將花費更多的時間來進行調試。