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

My Api data is consist of 2 things count and time. I have mentioned two paragraphs above: I want to display count in first paragraph tag. And I want to display Time is another paragraph. I try more time but API data will not appear paragraph tags. Plz help me

Answer 1

You need a loop for making iteration in the data fetched from api provider

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

For each iteration we need to add the value to 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>' );
});

final code will be:

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

also if your api data consist just one record of value your code will be:

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>