如何在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數據？