将ID设为String jQuery？

Question

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!

Answer 1

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>