JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div class="datax"></div>
<div class=center>
  Harapannya
</div>
<div class="mb-3">
  <b>1</b>
  <div class="nama">John Doe - Male</div>
  <div class="nama">Nathan Doe - Male</div>
</div>
<div class="mb-3">
  <b>2</b>
  <div class="nama">Allen - Male</div>
  <div class="nama">Clara - Male</div>
</div>
<div class="mb-3">
  <b>3</b>
  <div class="nama">Karin - Feale</div>
  <div class="nama">Queen - Feale</div>
</div>

CSS

.center {
  padding: 16px 0;
}

.mb-3 {
  margin-bottom:8px
}

JavaScript

var data = 
 {
  "1": {
    "1000": {
      "nama": "John Doe",
      "gender": "Male",
    },
    "2000": {
      "nama": "Nathan Doe",
      "gender": "Male",
    },
  },
  "2": {
    "1001": {
      "nama": "Allen",
      "gender": "Male",
    },
    "2001": {
      "nama": "Clara",
      "gender": "Male",
    },
  },
  "3": {
    "1002": {
      "nama": "Karin",
      "gender": "Female",
    },
    "2002": {
      "nama": "Queen",
      "gender": "Female",
    },
  },
}

var a;
Object.keys(data).forEach(key => {
	var c = Object.keys(data[key]);
  var coba = data[key].nama;
	console.log(data)
})