CODEWITHSUNDEEP
javascriptjqueryhtmljsonapi
user4449419
user4449419

Reputation:

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

Upvotes: 1

Views: 174

Answers (2)

Daniel Flint
Daniel Flint

Reputation: 778

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>

Upvotes: 1

Sridhar Gudimela
Sridhar Gudimela

Reputation: 584

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

Upvotes: 0

Related Questions