如何在 HTML 中显示 API 数据？

Question

<script>
     function fetchdata() {
     $.get("http://10.10.35.138:5000/data", function (data) { //The link of this line is my api link
                $("#visitor").html('Visitor Count : ' + data.people);
                $("#time").html('Time : ' + data.time);
            });
        }
</script>

****HTML PART****
<div class="details">
<p id="visitor">Person Count:</p>
<p id="time">Time:</p>`enter code here`
</div>

我的 Api 数据由计数和时间两部分组成。我在上面提到了两段：我想在第一段标签中显示计数。我想显示时间是另一段。我尝试了更多时间，但 API 数据不会出现段落标签。请帮帮我

Answer 1

您需要一个循环来对从 api 提供程序获取的数据进行迭代

$.each(data, function( index, value ) {
});

对于每次迭代，我们需要将值添加到 html：

$("#details").append('<p id="visitor"> ' + value. people  + '</p> <p id="time">' + value.time + '</p>' );

$.each(data, function( index, value ) {
  $("#details").append('<p id="visitor">' + value. people + '</p> <p id="time">' + value.time + '</p>' );
});

最终代码将是：

<script>
     function fetchdata() {
     $.get("http://10.10.35.138:5000/data", function (data) { //The link of this line is my api link
               $.each(data, function( index, value ) {
                     $("#details").append('<p id="visitor">' + value. people + '</p> <p id="time">' + value.time + '</p>' );
               });
           });
     }
</script>

****HTML PART****
<div class="details">
<p id="visitor">Person Count:</p>
<p id="time">Time:</p>`enter code here`
</div>

如果您的 api 数据仅包含一条价值记录，您的代码将是：

function fetchdata() {
     $.get("http://10.10.35.138:5000/data", function (data) { //The link of this line is my api link
         $("#visitor").html(data.people);
         $("#time").html(data.time);
     });
}

****HTML PART****
<div class="details">
<p id="visitor">Person Count:</p>
<p id="time">Time:</p>`enter code here`
</div>