Javascript HTTP请求中的HTML表返回null

我正在尝试为我创建的HTML表创建一个图表，该表存储从公共API检索到的值

但在创建图表之前，我首先将HTML表解析为JavaScript对象，并在控制台中输出它。但它似乎返回

null

示例表

<div>
  <div>
     <canvas id="bulkdensitychart"></canvas>
  </div>

  <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>

土层（米深）
价值
0.00米
0.05米
0.15米
0.30米
0.60米
1.00米
2.00米

用于从API获取值的脚本

$(document).ready(function () {
    $("#search").click(function () {
        $("#physical").show();
        let lat = $("#lat").val();
        let long = $("#long").val();
        if (lat == "" || long == "" || lat > 90 || lat < -90 || long > 180 || long < -180) {
            alert("please enter proper latitude and longitude value to get info");
            return;
        }
        else {
            $.ajax({

                type: "GET",
                url: `https://rest.soilgrids.org/query?lon=${long}&lat=${lat}&attributes=ORCDRC,PHIHOX,PHIKCL,BLDFIE,CLYPPT,SLTPPT,SNDPPT,WWP`,
                dataType: "json",
                success: function (response) {
                    if (response.properties.soilmask == "nodata") {
                        alert("No data found :(");
                        return;
                    }
                    else {
                        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;
                        alert("Data updated");
                    }

                },
                function(jqXHR, exception) {
                    console.log("error");

                }
            })

        }
    })
})

$（文档）.ready（函数（）{
$（“#搜索”）。单击（函数（）{
$（“#物理”）.show（）；
设lat=$（“#lat”）.val（）；
设long=$（“#long”）.val（）；
如果（纬度=“”| |长=“”| |纬度>90 | |纬度<-90 | |长>180 | |长<-180）{
警报（“请输入正确的纬度和经度值以获取信息”）；
返回；
}
否则{
$.ajax({
键入：“获取”，
网址：`https://rest.soilgrids.org/query?lon=${long}&lat=${lat}&attributes=ORCDRC、PHIHOX、PHIKCL、BLDFIE、CLYPPT、SLTPPT、SNDPPT、WWP`、，
数据类型：“json”，
成功：功能（响应）{
if（response.properties.soilmask==“nodata”）{
警报（“未找到数据：（”）；
返回；
}
否则{
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；
警报（“数据更新”）；
}
},
函数（jqXHR，异常）{
控制台日志（“错误”）；
}
})
}
})
})

用于在控制台中创建图表和解析HTML表4输出的脚本

function BuildChart(labels, values, chartTitle) {
  var ctx = document.getElementById("bulkdensitychart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels, // Our labels
      datasets: [{
        label: chartTitle, // Name the series
        data: values, // Our values
        backgroundColor: [ // Specify custom colors
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 99, 132, 0.2)'
        ],
        borderColor: [ // Add custom color borders
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255,99,132,1)'
        ],
        borderWidth: 1 // Specify bar border width
      }]
    },
    options: {
      responsive: true, // Instruct chart js to respond nicely.
      maintainAspectRatio: false, // Add to prevent default behavior of full-width/height 
    }
  });
  return myChart;
}
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);

函数构建图（标签、值、图表标题）{
var ctx=document.getElementById（“bulkdensitychart”）.getContext（“2d”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：标签，//我们的标签
数据集：[{
标签：chartTitle，//为系列命名
数据：值，//我们的值
backgroundColor:[//指定自定义颜色
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
"rgba(255,159,64,0.2)",，
'rgba（255,99,132,0.2）'
],
borderColor:[//添加自定义颜色边框
"rgba(255,99132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
"rgba(255,159,64,1)",，
'rgba（255,99132,1）'
],
borderWidth:1//指定条形图边框宽度
}]
},
选项：{
responsive:true，//指示chart js做出良好的响应。
maintaintAspectRatio:false，//添加以防止全宽/全高的默认行为
}
});
返回我的图表；
}
var table=document.getElementById（'bulkdensity'）；
var json=[]；//第一行需要是标题
var头=[]；
对于（var i=0；i

---

我还没有编写映射值的代码。我想先完成这部分。如何使值显示在控制台中？

看看JS Fiddle：

在这里，您需要考虑到，在完成AJAX请求之前，您将无法从表中的API中获取数据&它在JSON中返回“undefined”。这就是为什么我们使用“complete”观察AJAX完成的原因方法，然后在使用您的代码检索和准备JSON数据之后，就可以正常工作了

有关$.ajax的“完整”方法的参考，请访问：

JS代码：

$(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);
      }
  });
}

$（文档）.ready（函数（）{
getAPIData（）；
});
函数getAPIData（）{
$.ajax({
url:“https://rest.soilgrids.org/query?lon=72.8397202&lat=19.0010232&attributes=ORCDRC，PHIHOX，PHIKCL，BLDFIE，CLYPPT，SLTPPT，SNDPPT，WWP“，
键入：“获取”，
数据类型：“json”，
错误：函数（）{
log（“处理请求时出错”）；
}, 
成功：功能（响应）{
var bldfiesl1=response.properties.BLDFIE.M.sl1；
var bldfiesl2=response.properties.BLDFIE.M.sl2；
var bldfie