How to use JSON data from an API in HTML page?
Question
Really stupid question here, but I'm trying to display some JSON data in an HTML page. I'm more of a backend person (Bash) and only know basic HTML. I'd like to perform the Bash equivalent of storing data into a variable and calling it again later. Can I do that with 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 answers
solution1
1 ACCPTED 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>
solution2
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" );
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.