如何在 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>