Customize HTML Table based on data-CodePudding

I have a table that repeats the same data that needs to be a <th>. How can I do it on javascript/jquery? Please see reference table below:

Table I have:

|GameName |    Category   | Value|
----------------------------------
|Game 1   | Description 1 | 1,000|
|Game 1   | Description 1 | 2,000|
|Game 2   | Description 1 | 3,000|
|Game 2   | Description 1 | 500  |
|Game 3   | Description 1 | 5,000|
|Game 3   | Description 1 | 100  |
|Game 1   | Description 2 | 100  |
|Game 2   | Description 2 | 300  |
|Game 3   | Description 2 | 200  |

Table must be:

|Descriptions| Game 1 | Game 2 | Game 3|
----------------------------------------
|Description1| 3,000  | 3,500  | 5,100 |
|Description2| 100    | 300    | 200   |

Table data will come from an object (sample data below):

 [
     {
      0: "Game1",
      1: "Description1",
      2: "1,000"
     },
     {
      0: "Game1",
      1: "Description1",
      2: "2,000"
     },
     {
      0: "Game2",
      1: "Description1",
      2: "3,000"
     },
     {
      0: "Game2",
      1: "Description1",
      2: "500"
     },
     {
      0: "Game3",
      1: "Description1",
      2: "5,000"
     },
     {
      0: "Game3",
      1: "Description1",
      2: "100"
     },
     {
      0: "Game1",
      1: "Description2",
      2: "100"
     },
     {
      0: "Game2",
      1: "Description2",
      2: "300"
     },
     {
      0: "Game1",
      1: "Description2",
      2: "200"
     }
   ]

My actual code:

var data = [
    {
          0: "Game1",
          1: "Description1",
          2: "1,000"
         },
         {
          0: "Game1",
          1: "Description1",
          2: "2,000"
         },
         {
          0: "Game2",
          1: "Description1",
          2: "3,000"
         },
         {
          0: "Game2",
          1: "Description1",
          2: "500"
         },
         {
          0: "Game3",
          1: "Description1",
          2: "5,000"
         },
         {
          0: "Game3",
          1: "Description1",
          2: "100"
         },
         {
          0: "Game1",
          1: "Description2",
          2: "100"
         },
         {
          0: "Game2",
          1: "Description2",
          2: "300"
         },
         {
          0: "Game1",
          1: "Description2",
          2: "200"
         }
];
  var html = '';
for(var i=0; i < data.length; i  ) {
  var data2 = data[i]
  
  html = '<tr>'  
          '<td>'   data2[0]   '</td>'  
          '<td>'   data2[1]   '</td>'  
          '<td>'   data2[2]   '</td>'  
         '</tr>';
}

$("#tbody").html(html);

table, th, td {
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="border">
<thead>
  <tr>
    <th>GameName</th>
    <th>Category</th>
    <th>Value</th>
  </tr>
</thead>
<tbody id="tbody">

</tbody>

</table>

CodePudding user response：

Herre is a version using forEach and map

const nf = new Intl.NumberFormat('en-US');
const add = (str1, str2) => nf.format( str1.replace(/,/g, "")    str2.replace(/,/g, ""))
const th = document.querySelector("#th tr");
const tb = document.getElementById("tb");
const games = [];
arr.sort((a, b) => a[1].localeCompare(b[1]) || a[0].localeCompare(b[0]))
console.log(arr)

arr.forEach(item => {
  const lastRow = tb.querySelector('tr:last-child')
  const descRow = document.getElementById(item["1"]);
  const id = `${item["1"]}${item["0"]}`
  const cell = document.getElementById(id);
  if (cell) {
    cell.textContent = add(cell.textContent, item["2"])
  } else {
    if (descRow) descRow.innerHTML  = `<td id="${id}">${item["2"]}</td>`
    else tb.innerHTML  = `<tr id="${item["1"]}"><td>${item["1"]}</td><td id="${id}">${item["2"]}</td></tr>`
  }
  if (games.indexOf(item["0"]) === -1) games.push(item["0"])
})
th.innerHTML  = games.map(game => `<th>${game.replace("Game","Game ")}</th>`).join("")

table,
th,
td {
  border: 1px solid;
}

td {
  text-align: right
}

<table>
  <thead id="th">
    <tr>
      <th>Descriptions</th>
  </thead>
  <tbody id="tb"></tbody>
</table>

<pre>
|Descriptions| Game 1 | Game 2 | Game 3|
----------------------------------------
|Description1| 3,000  | 3,500  | 5,100 |
|Description2| 300    | 300    |       |</pre>

<script>
  const arr = [{
      0: "Game1",
      1: "Description1",
      2: "1,000"
    },
    {
      0: "Game1",
      1: "Description1",
      2: "2,000"
    },
    {
      0: "Game2",
      1: "Description1",
      2: "3,000"
    },
    {
      0: "Game2",
      1: "Description1",
      2: "500"
    },
    {
      0: "Game3",
      1: "Description1",
      2: "5,000"
    },
    {
      0: "Game3",
      1: "Description1",
      2: "100"
    },
    {
      0: "Game1",
      1: "Description2",
      2: "100"
    },
    {
      0: "Game2",
      1: "Description2",
      2: "300"
    },
    {
      0: "Game1",
      1: "Description2",
      2: "200"
    }
  ];
</script>