通過此 API https://restcountries.com/v3.1/name/portugal獲取資料。對于幾個欄位，即標志、名稱、貨幣獲取 [物件物件]
XMLHTTPRequest
const request = new XMLHttpRequest();
// Here we need URL for AJAX calls
//request is an object
// Type of Request - GET
request.open('GET','https://restcountries.com/v3.1/name/portugal');
// open the request
//we have to send this request to the url to fetch the data
request.send();
//We need request call back on the load. callback function
request.addEventListener('load',function() {
// converting json file to normal text.
const [data] = JSON.parse(this.responseText);
console.log(data);
const html=`
<article >
<img src="${data.flags}"/>
console.log(data.flags);
<div >
<h3 >${data.name}</h3>
<h4 >${data.region}</h4>
<p ><span>??</span>${data.population}</p>
<p ><span>???</span>${data.languages}</p>
<p ><span>??</span>${data.currencies}</p>
</div>
</article>
`;
對于 Flag 影像獲取 Cannot GET /[object Object] 其他欄位也是 [object Object]。
我必須使用 JSON.stringify 嗎？
任何幫助表示贊賞。
謝謝，阿吉特
uj5u.com熱心網友回復：
我認為你需要這樣做：
const data = JSON.parse(this.responseText);
console.log(data);
console.log(data[0].population); etc
即從 const [data] 中洗掉方括號并使用索引 0
uj5u.com熱心網友回復：
您需要使用正確的符號從 JSON 中獲取值。您可以參考下面的代碼以獲得更多的理解。
request.addEventListener('load', function () {
// converting json file to normal text.
const [data] = JSON.parse(this.responseText);
console.log(data);
const lang = Object.values(data.languages).join(',');
const currencies = Object.values(data.currencies).map((c) => c.name).join(',');
const html = `
<article >
<img src="${data.flags.png}"/>
<div >
<h3 >${data.name.common}</h3>
<h4 >${data.region}</h4>
<p ><span>??</span>${data.population}</p>
<p ><span>???</span>${lang}</p>
<p ><span>??</span>${currencies}</p>
</div>
</article>
`;
const divEl = document.createElement('div');
divEl.innerHTML = html;
document.body.appendChild(divEl);
console.log(html);
});
uj5u.com熱心網友回復：
data.flags您用于屬性的src屬性是物件本身，而不是簡單的 URL，因為它包含 URLpng和svg格式。
嘗試傳遞data.flags.png或 data.flags.svg獲取該src屬性，它應該可以作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/485971.html
標籤：javascript json 目的 xmlhttp请求
上一篇：基本JavaScript-如何隨機比較物件陣列中的兩個屬性
下一篇：僅當鍵匹配時才合并2個物件陣列