JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<table id="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Vote</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<div class="center">
  My Expectation
</div>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Vote</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>3000</td>
    </tr>
    <tr>
      <td>Allen</td>
      <td>3100</td>
    </tr>
    <tr>
      <td>Karin</td>
      <td>3200</td>
    </tr>
  </tbody>
</table>

CSS

table td,table th { 
  padding:8px;
  border: 1px solid
}
.center {
  margin: 16px 0
}

JavaScript

var name_id = [1000,1001,1002];
var total = [3000,3100,3200];
var name_data = 
	{
  	"1": {
     	"1000": {
     	"nama": "John Doe",
     	"gender": "Male",
     },
    },
    "2": {
     	"1001": {
     	"nama": "Allen",
     	"gender": "Male",
     },
    },
    "3": {
     	"1002": {
     	"nama": "Karin",
     	"gender": "Female",
     },
    },
   }

var id_name = ""
name_id.map((c, i) => {
    id_name += `<tr>
    <td>${c}</td></tr>
`});

var total_vote=""
total.map((c, i) => {
    total_vote += `<tr>
    <td>${c}</td></tr>
`});

var valuex = (Object.values(name_data));
var name_ = Object.keys(name_data).length;
for (var x; x<valuex.length; x++) {
	console.log(valuex[x])
}
//console.log('a',name_)
//var newName = {'1000': 'John',}
//for (var x=0; x<name)




$('#table').append(`
	<tbody>
  	${id_name}
    ${total_vote}
  </tbody>
`)