I have a jQuery function that calls an API. The result sends me back some data. There is a piece of data I need to work with.
I'm trying to replace teamId = 100 with "Blue Team" and teamId = 200 with (Read Team).
I just need a variable that checks if the ID is 100 and makes the value of the variable "blue" and if its 200 then "red"
I've got this:
function generateTeamHtml(teamId, participants) {
var teamNum = "team"+teamId;
var html = '<table id="' + teamNum + '">';
html += '<thead>';
html += '<tr><th colspan="2">';
html += teamNum;
html += '</th></tr>';
html += '<tr><th> Summoner Name </th><th> Summoner Id </th></tr>';
html += '</thead><tbody>';
for ( userNum in participants) {
var user = participants[userNum];
var team = user.teamId;
var summonerName = user.summonerName;
var summonerId = user.summonerId;
if (team == teamId) {
html += '<tr><td>' + summonerName + '</td><td>' + summonerId + '</td></tr>';
}
}
html += '</tbody></table>';
return html;
}
So in the table I see either "team100" or "team 200" I would like a variable called
var = teamColour
Team Colour should take "teamId" and say if the id is 100 then make "teamColour" Blue if "teamId" make "teamColour" Red.
Thankyou!
I think that your model should come with that information directly from that api, but, if it is impossible... you can map that ids with a some data reducer, like what follow:
var getTeamColor = (function(teamsMap) {
return function(teamId) {
teamId = Number((/(\d+)/.exec(teamId) || []).pop());
if(teamsMap.hasOwnProperty(teamId)) {
return teamsMap[teamId];
}
};
})({
100: "blue",
200: "red"
});
document.addEventListener('DOMContentLoaded', function() {
var team1 = document.getElementById('team100');
var team2 = document.getElementById('team200');
team1.style.backgroundColor = getTeamColor(team1.id);
team2.style.backgroundColor = getTeamColor(team2.id);
});
div { width: 200px; height: 200px; margin: 25px; float:left; color: #fff; padding: 25px 10px; text-align: center; font-size: 2em; }
<div id="team100">
team 100
</div>
<div id="team200">
team 200
</div>
</div>