如何通过ajax api调用在HTML元素中显示值答案

【问题标题】：How to dispaly values in HTML element from ajax api call如何通过ajax api调用在HTML元素中显示值
【发布时间】：2018-08-21 07:42:38
【问题描述】：

我有来自 ajax api 调用的 json 响应。我在 console.log 中得到了预期的结果，但我想显示响应 html 元素的每个值。

Scheduled<br>
Driver:<br>
Passenger:<br>

Active<br>
Driver:<br>
Passenger:

工作代码

$(document).ready(function() {
  $.ajax({
    asyn: true,
    crossDomain: true,
    url: "/rate/current/gettrips",
    dataType: 'JSON',
    callback: 'callback',
    type: 'GET',
    success: function(result) {
      //console.log(result)
      var obj = jQuery.parseJSON(JSON.stringify(result))
      for (var propertyName in obj) {
        console.log(propertyName + ":");
        for (var internalPropertyName in obj[propertyName]) {
          console.log(internalPropertyName + ":" + obj[propertyName][internalPropertyName]);
        }
      }

    }
  });

});

JSON 中的 API 响应如下

{
  "scheduled": {
    "driver_count": 1,
    "passenger_count": 1
  },
  "active": {
    "driver_count": 0,
    "passenger_count": 0
  }

【问题讨论】：

预期结果是什么？
在 html 元素中显示值，就像在 html 代码中一样在日程表中显示驱动程序和乘客对 Active 的计数相同
那么，你的意思是 10 应该出现在总时刻表司机中，60 应该出现在总时刻表乘客中，并且对于乘客的活跃司机来说类似？
如果你想让某些东西工作，是什么让你无法编写适当的代码？
@31piy 是的，是的

标签： jquery arrays json ajax api

【解决方案1】：

如果目标只是在 HTML 元素中显示值，这是一种方法。你不需要循环。

只需使用 ID 选择器选择适当的元素，并在其上使用text() 方法来设置该元素的内部文本。

请看以下演示：

const jsobj = {
  "scheduled": {
    "driver_count": 10,
    "passenger_count": 60
  },
  "active": {
    "driver_count": 40,
    "passenger_count": 90
  }
}

$('#total_sh').text(jsobj.scheduled.driver_count + jsobj.scheduled.passenger_count);
$('#schedule-driver').text(jsobj.scheduled.driver_count);
$('#schedule-pass').text(jsobj.scheduled.passenger_count);

$('#total_ac').text(jsobj.scheduled.driver_count + jsobj.active.passenger_count);
$('#Active-driver').text(jsobj.active.driver_count);
$('#Active-pass').text(jsobj.active.passenger_count);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="more" href="javascript:;">
  Total Schedule: <span id="total_sh"></span>
  <p>Drivers : <span id="schedule-driver"></span></p>
  <p>passengers : <span id="schedule-pass"></span></p>
</div>
<hr>
<div class="more" href="javascript:;">
  Total Active: <span id="total_ac"></span>
  <p>Drivers : <span id="Active-driver"></span></p>
  <p>passengers :<span id="Active-pass"></span></p>
</div>

【讨论】：