JSFiddle - React, Tailwind, and code Playground

by Eeya Otajal

HTML

<div id="keys">

</div>
<div id="values">

</div>

JavaScript

$(document).ready(function() {
  var a = {
    "HYDROGEN": {
      "atomic_number": 1,
      "abbreviation": "H",
      "atomic_weight": 1.008
    },
    "HELIUM": {
      "atomic_number": 2,
      "abbreviation": "He",
      "atomic_weight": 4.003
    }
  }

  for (var sIndexKey in a) {
  	if (a.hasOwnProperty(sIndexKey) === true) {
    	var oJsonData = a[sIndexKey];
      	var sObjectKeys = Object.keys(oJsonData); //e.g atomic_number / abbreviation / atomic_weight
        for (var iIndex = 0; iIndex < sObjectKeys.length; iIndex++) {
        		var sJsonKeys = sObjectKeys[iIndex];
            var sJsonValues = oJsonData[sJsonKeys];
            $('#keys').append(sJsonKeys + ', ');
            $('#values').append(sJsonValues + ', ');
            console.log(sJsonKeys);
            console.log(sJsonValues);
        }
    }
  	
  }

});