使用AJAX將JSON數據轉換爲HTML

我試圖使用Value =「AUD」作爲初始值來輸入貨幣的值。我對JSON和AJAX很新。我無法弄清楚爲什麼有一個與JSON.parse和XMLHttpRequest相關的404錯誤，我非常感謝任何提示我出錯的地方。提前致謝。使用AJAX將JSON數據轉換爲HTML

`enter code here` 
<html lang="en"> 
    <head> 
</head> 
<body> 
<div id ="forex-info"> 
<p id="currencyList" class="currencyList" value ="AUD">Australia</p> 
    <p id="rateList" class="event"></p> 
</div 
<script type="text/javascript"> 
var tableContainer = document.getElementById("forex-info"); 
var ourRequest = new XMLHttpRequest(); 
var myData = "http://api.fixer.io/latest".rates; 
ourRequest.open('GET', myData, true); 
ourRequest.onload = function loading() { 
    var ourData = JSON.parse(ourRequest.responseText); 
    renderHTML(ourData); 
    function renderHTML(data) { 
     var output = ""; 
     for (var key in data) 
     { 
      output += "<p>" + key + output + "</p>" 
     } 
} 
}; 
</script> 
</body>

來源

2017-04-09 Peter Ayello Wright

檢查出myData變量，它似乎不正確。 – Johnny

此代碼有很多錯誤 – KornholioBeavis

的主要問題是如何你調用API「http://api.fixer.io/latest」 .rates 您可以通過那裏調用其他端點解決params中，與查詢參數。

請參閱下面的示例調用您指定的端點。這應該讓你開始

var myData = 'https://api.fixer.io/latest' 

var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
      let res = JSON.parse(xhttp.responseText) 
      Object.keys(res.rates).forEach((e)=>{ 
       console.log(`${e}: ${res.rates[e]}`) 
       //Add your stuff here 
      }) 
    } 
}; 

xhttp.open("GET", myData, true); 
xhttp.send();

來源

2017-04-09 17:24:38 KornholioBeavis

感謝您的幫助。這現在已經奏效了！我認爲forEach循環/ console.log（）使用jQuery？ –

如果你引用es6字符串模板語法'$ {e}：$ {res.rates [e]}'，那麼不需要jquery。如果回答您的問題，請將答案標記爲正確。 – KornholioBeavis

$ {e}：$ {res.rates [e]}等價於e +'：'+ res.rates [e] – KornholioBeavis

使用AJAX將JSON數據轉換爲HTML

回答

相關問題