Javascript 如何在HTML页面中使用API中的JSON数据？_Javascript_Jquery_Html_Json_Api

Javascript 如何在HTML页面中使用API中的JSON数据？

javascript jquery html json api

Javascript 如何在HTML页面中使用API中的JSON数据？,javascript,jquery,html,json,api,Javascript,Jquery,Html,Json,Api,这里的问题非常愚蠢，但我正试图在HTML页面中显示一些JSON数据。我更喜欢后端（Bash），只知道基本的HTML。我想执行Bash等价于将数据存储到变量中并稍后再次调用它。我可以用Javascript/HTML来实现吗？我有下面的粗略代码，但我想返回整个页面中不同点的数据，而不仅仅是列表中的数据 <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.

这里的问题非常愚蠢，但我正试图在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>


$.get（”https://chain.so/api/v2/get_price/BTC/USD“，功能（响应）{
$（“正文”）
.append（“网络：+response.data.Network+”
）
.append（“价格：“+response.data.prices[0].Price+”
”）
.append（“交易所：“+response.data.prices[0].Exchange+”
”）
.append（“价格：“+response.data.prices[1].Price+”
”）
.append（“交易所：“+response.data.prices[1].Exchange+”
”）
.append（“价格：“+response.data.prices[3].Price+”
”）
.append（“交易所：“+response.data.prices[3].Exchange+”
”）；
}“json”）；

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

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


标题1

测试1
**这里有JSON数据**
测试3

标题2
专栏1
专栏2
第3栏
事情1
**此处为JSON数据**
**这里有JSON数据**
事情2
**此处为JSON数据**
**这里有JSON数据**
事情3
**此处为JSON数据**
**这里有JSON数据**

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

$.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" );

$.get（“https://chain.so/api/v2/get_price/BTC/USD“，功能（响应）{
$（“ul>li”）[1].html（response.data.network）；
var tableHtml=''；
var价格=响应。数据。价格；
对于（i=0；i可以通过多种方式实现。例如：

$.get（“https://chain.so/api/v2/get_price/BTC/USD“，功能（响应）{
$（“#网络”）.text（response.data.network）；
美元。每个（响应。数据。价格，函数（i，val）{
$（#thing+i+“price”）.text（val.price）；
$（#thing+i+“exchange”）.text（val.exchange）；
});
}，“json”）；

标题1

测试1

测试3

标题2
专栏1
专栏2
第3栏
事情1
事情2
事情3
看看像这样的数据绑定库。这正是我需要的，谢谢！很有意义，就像Bash一样！