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

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

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

来源

2015-11-04 Logan M.

看看数据绑定库等[KnockoutJS]（http://knockoutjs.com/documentation/foreach-binding.html）。 – Serguei

许多方面，这可以实现。例如：

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

来源

2015-11-04 03:30:23

这正是我所需要的，谢谢！有意义，就像Bash！ –

，如果我的理解是否正确，从你的榜样，您可以填充该数据在您的标题和表如下

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

来源

2015-11-04 03:28:21

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

回答

相关问题

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