如何从Ajax API调用显示HTML元素中的值

Question

我有来自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
  }

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