如何在 HTML 页面中使用来自 API 的 JSON 数据？答案

【问题标题】：How to use JSON data from an API in HTML page?如何在 HTML 页面中使用来自 API 的 JSON 数据？
【发布时间】：2016-02-04 10:12:44
【问题描述】：

这里真的很愚蠢的问题，但我试图在 HTML 页面中显示一些 JSON 数据。我更像是一个后端人员（Bash），只知道基本的 HTML。我想执行将数据存储到变量中并稍后再次调用它的 Bash 等效项。我可以用 Javascript/HTML 做到这一点吗？我有下面的粗略代码，但我想在整个页面的不同点返回一些数据，而不仅仅是在列表中。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div id="placeholder"></div>
<script>
$.get( "https://chain.so/api/v2/get_price/BTC/USD", function( response ) {
  $( "body" )
    .append("Network: " + response.data.network + "<br/>" )
    .append("Price: " + response.data.prices[0].price + "</br>")
    .append("Exchange: " + response.data.prices[0].exchange+ "</br>")
    .append("Price: " + response.data.prices[1].price + "</br>")
    .append("Exchange: " + response.data.prices[1].exchange+ "</br>")
    .append("Price: " + response.data.prices[3].price + "</br>")
    .append("Exchange: " + response.data.prices[3].exchange+ "</br>");
}, "json" );
</script>

</body>

</html>

例如，我想在页面的不同点显示数据。这可能吗？

<!DOCTYPE html>
<html>
<body>

<h2>Heading1</h2>

<ul style="list-style-type:disc">
  <li>Test1</li>
  <li>**JSON DATA HERE**</li>
  <li>Test3</li>
</ul>  

<h2>Heading2</h2>
<table>
  <tr>
    <th>Column1</th>
    <th>Column2</th>        
    <th>Column3</th>
  </tr>
  <tr>
    <td>Thing1</td>
    <td>**JSON DATA HERE**</td>     
    <td>**JSON DATA HERE**</td>
  </tr>
  <tr>
    <td>Thing2</td>
    <td>**JSON DATA HERE**</td>     
    <td>**JSON DATA HERE**</td>
  </tr>
  <tr>
    <td>Thing3</td>
    <td>**JSON DATA HERE**</td>     
    <td>**JSON DATA HERE**</td>
  </tr>
</table>

</body>
</html>

【问题讨论】：

看看像KnockoutJS这样的数据绑定库。

标签： javascript jquery html json api

【解决方案1】：

这可以通过多种方式实现。示例：

$.get( "https://chain.so/api/v2/get_price/BTC/USD", function( response ) {
    $("#network").text(response.data.network);
    
    $.each(response.data.prices, function(i, val) {
        $("#thing" + i + "price").text(val.price);
        $("#thing" + i + "exchange").text(val.exchange);
    });
}, "json" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Heading1</h2>

<ul style="list-style-type:disc">
  <li>Test1</li>
  <li><span id="network"></span></li>
  <li>Test3</li>
</ul>  

<h2>Heading2</h2>
<table>
  <tr>
    <th>Column1</th>
    <th>Column2</th>        
    <th>Column3</th>
  </tr>
  <tr>
    <td>Thing1</td>
    <td><span id="thing0price"></span></td>     
    <td><span id="thing0exchange"></span></td>     
  </tr>
  <tr>
    <td>Thing2</td>
    <td><span id="thing1price"></span></td>     
    <td><span id="thing1exchange"></span></td>     
  </tr>
  <tr>
    <td>Thing3</td>
    <td><span id="thing2price"></span></td>     
    <td><span id="thing2exchange"></span></td>     
  </tr>
</table>

【讨论】：

这正是我所需要的，谢谢！有道理，就像 Bash 一样！

【解决方案2】：

如果我理解正确，从您的示例中，您可以在标题和表格中填充该数据，如下所示

$.get( "https://chain.so/api/v2/get_price/BTC/USD", function( response ) {
  $( "ul > li" )[1].html(response.data.network);
    var tableHtml = '';
     var prices = response.data.prices;
      for(i=0;i<prices.length;i++){
          tableHtml += '<tr>';
          tableHtml += '<td>Thing '+i+'</td>';          
          tableHtml += '<td>'+prices[i].price +'</td>';
          tableHtml += '<td>'+prices[i].exchange +'</td>';
          tableHtml += '</tr>';
      }
       $('<table>').remove();//To remove any old table
        $('<table>'+tableHtml+'</table>').insertAfter('h2');
}, "json" );

【讨论】：