Functionality:
I have a String of data =>("A, 4.0. 00:04@B,5.0,00:05@C,9.0,00:09@......"). 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:
Issue:
Currently, the entire table just looks like this:
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>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:04@B,5.0,00:05@C,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>All this code is doing is replacing the contents of a set of elements.
With this part inside the loop:
$("#Player_Name").html(innerList[0]);
$("#Player_Score").html(innerList[2]);
You're replacing the same contents over and over.
If you want each of the values to show in the table, you need to create new <tr> elements and append them to the end of the <table> element.
$('#Rugby_Scoreboard').append('<tr><td><div id="Player_Name_' + innerList[0] + '">' +
innerList[2] +
'</div></td></tr>`);