JSFiddle - React, Tailwind, and code Playground

HTML

<table id="bulkdensity">
  <tr>
    <th>Soil Layer (meter deep)</th>
    <th>Value</th>
  </tr>
  <tr>
    <td>0.00 m</td>
    <td id="bldfiesl1"></td>
  </tr>
  <tr>
    <td>0.05 m</td>
    <td id="bldfiesl2"></td>
  </tr>
  <tr>
    <td>0.15 m</td>
    <td id="bldfiesl3"></td>
  </tr>
  <tr>
    <td>0.30 m</td>
    <td id="bldfiesl4"></td>
  </tr>
  <tr>
    <td>0.60 m</td>
    <td id="bldfiesl5"></td>
  </tr>
  <tr>
    <td>1.00 m</td>
    <td id="bldfiesl6"></td>
  </tr>
  <tr>
    <td>2.00 m</td>
    <td id="bldfiesl7"></td>
  </tr>
</table>

JavaScript

$(document).ready(function(){
	getAPIData();
});

function getAPIData() {
  $.ajax({
      url: "https://rest.soilgrids.org/query?lon=72.8397202&lat=19.0010232&attributes=ORCDRC,PHIHOX,PHIKCL,BLDFIE,CLYPPT,SLTPPT,SNDPPT,WWP", 
      type: "GET", 
      dataType: "json", 
      error: function() {
          console.log("Error processing your request");
      }, 
      success: function(response) {
        var bldfiesl1 = response.properties.BLDFIE.M.sl1;
        var bldfiesl2 = response.properties.BLDFIE.M.sl2;
        var bldfiesl3 = response.properties.BLDFIE.M.sl3;
        var bldfiesl4 = response.properties.BLDFIE.M.sl4;
        var bldfiesl5 = response.properties.BLDFIE.M.sl5;
        var bldfiesl6 = response.properties.BLDFIE.M.sl6;
        var bldfiesl7 = response.properties.BLDFIE.M.sl7;
        document.getElementById('bldfiesl1').innerHTML = bldfiesl1;
        document.getElementById('bldfiesl2').innerHTML = bldfiesl2;
        document.getElementById('bldfiesl3').innerHTML = bldfiesl3;
        document.getElementById('bldfiesl4').innerHTML = bldfiesl4;
        document.getElementById('bldfiesl5').innerHTML = bldfiesl5;
        document.getElementById('bldfiesl6').innerHTML = bldfiesl6;
        document.getElementById('bldfiesl7').innerHTML = bldfiesl7;
      }, 
			complete: function() {
        var table = document.getElementById('bulkdensity');
        var json = []; // First row needs to be headers 
        var headers =[];
        for (var i = 0; i < table.rows[0].cells.length; i++) {
          headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
        }

        // Go through cells 
        for (var i = 1; i < table.rows.length; i++) {
          var tableRow = table.rows[i];
          var rowData = {};
          for (var j = 0; j < tableRow.cells.length; j++) {
            rowData[headers[j]] = tableRow.cells[j].innerHTML;
          }
          json.push(rowData);
        }
        console.log("JSON DATA=", json);
			}
 ...