如何在HTML页面中使用来自API的JSON数据？
[英]How to use JSON data from an API in HTML page?
问题描述
Really stupid question here, but I'm trying to display some JSON data in an HTML page. 
这里的问题真愚蠢，但是我试图在HTML页面中显示一些JSON数据。 I'm more of a backend person (Bash) and only know basic HTML. 我更像一个后端人（Bash），并且只懂基本的HTML。 I'd like to perform the Bash equivalent of storing data into a variable and calling it again later. 我想执行相当于将数据存储到变量中并稍后再次调用的Bash。 Can I do that with Javascript/HTML? 我可以使用Javascript / HTML吗？ I have the rough code below, but I'd like to return some data in different points all over the page, not just in a list. 我有下面的粗略代码，但我想在整个页面的不同位置返回一些数据，而不仅仅是在列表中。
<!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>
For example, I'd like to show the data at different points in the page. 例如，我想在页面的不同位置显示数据。 Is that possible? 那可能吗？
<!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>
2 个解决方案
解决方案1
1 已采纳 2015-11-04 03:30:23
Many ways this could be achieved. 这可以通过许多方式实现。 Example: 例：
$.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>
解决方案2
0 2015-11-04 03:28:21
if I understand it correct, from your example, you can populate that data in your heading and table as follows 如果我理解正确的话，那么从您的示例中，您可以按以下方式在标题和表格中填充该数据
$.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" );
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.