Unable to populate a list of data into table dynamically

Functionality:

I have a String of data =>("A, 4.0. 00:[email protected],5.0,00:[email protected],9.0,00:[email protected]"). The String will be split into individual element, and the individual element will be appended to the tag in the table. Whereby, it will look like:

  1. A 00:04
  2. B 00:05
  3. C 00:09 ....
  4. G 00:29

Issue:

Currently, the entire table just looks like this:

  1. G 00:29 2. 3. ..... 10.

Hence, the last value of the data is just appended to the first row of the table. I am not sure if this is the correct method of populating the within the . Please help.

Code:

console.log("Leaderboard: " + data);
var playerList = data.split("@");

var innerList;
for (i = 0; i < playerList.length; i++) {
  innerList = playerList[i].split(",");
  console.log(innerList[0] + "|" + innerList[1] + "|" + innerList[2]);

  //innerList[0] ==> A to be appended to Player_Name
  //innerList[1] ==> 4.0 not needed to be appended
  //innerList[2] ==> 00:04 to be appended to Player_Score
  $("#Player_Name").html(innerList[0]);
  $("#Player_Score").html(innerList[2]);
}
#Rugby_Scoreboard {
  position: absolute;
  left: 335px;
  top: 182px;
  width: 825px;
  height: 818px;
  border-spacing: 5px;
  border-collapse: collapse;
}
<!-- ScoreBoard -Table form-->
<div id="Game_LeaderBoard" style="position:absolute; z-index:6; top:0px; left:0px; width: 1920px; heigth: 1000px; margin:auto;">

  <table id="Rugby_Scoreboard">
    <tr>
      <td>
        <div id="Player_Name" style="z-index:50; position:absolute; top:5px; left:150px; font-size:40px; font-family:'OpenSans-Light'; width:1080; color:#fff;">
          <font face="OpenSans-Light"></font>
        </div>
      </td>

      <td>
        <div id="Player_Score" style="z-index:50; position:absolute; top:5px; left:700px; font-size:40px; font-family:'OpenSans-Light'; width:1080; color:#fff;">
          <font face="OpenSans-Light"></font>
        </div>
      </td>
    </tr>
  </table>

</div>

Answers 1

  • You can use destructuring assignment and trailing comma to exclude 4.0 from result of .split(), use multiple selectors at jQuery(), call .html(function) to set html of both elements

    var data = "A,4.0,00:[email protected],5.0,00:[email protected],9.0,00:09";
    console.log("Leaderboard: " + data);
    var playerList = data.split("@");
    console.log(playerList)
    
    var innerList;
    for (i = 0; i < playerList.length; i++) {
      var [name,,score] = playerList[i].split(",");
      
      //innerList[0] ==> A to be appended to Player_Name
      //innerList[1] ==> 4.0 not needed to be appended
      //innerList[2] ==> 00:04 to be appended to Player_Score
      $("#Player_Name, #Player_Score")
      .html(function(index, html) {
        var prop = index === 0 ? name : score;
        return html + prop + "<br>"
      })
    }
    /*
    #Rugby_Scoreboard {
      position: absolute;
      left: 335px;
      top: 182px;
      width: 825px;
      height: 818px;
      border-spacing: 5px;
      border-collapse: collapse;
    }
    */
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- ScoreBoard -Table form-->
    <div id="Game_LeaderBoard" style="">
    
      <table id="Rugby_Scoreboard">
        <tr>
          <td>
            <div id="Player_Name" style="">
              <font face="OpenSans-Light"></font>
            </div>
          </td>
    
          <td>
            <div id="Player_Score" style="">
              <font face="OpenSans-Light"></font>
            </div>
          </td>
        </tr>
      </table>
    
    </div>


Related Articles