尽管我从 API 获取数据,但我在 HTML 页面中的 Javascript JSON 代码不会呈现 RESTful API 数组对象。我该怎么办?
Posted
技术标签:
【中文标题】尽管我从 API 获取数据,但我在 HTML 页面中的 Javascript JSON 代码不会呈现 RESTful API 数组对象。我该怎么办?【英文标题】:My Javascript JSON code in HTML page does not render the RESTful API array objects, although I get the data from the API. What should I do? 【发布时间】:2022-01-11 20:50:01 【问题描述】:enter image description here问题是API的对象没有在html中呈现,我做错了什么?
<button onclick = "showCountries()">Show Countries</button>
<div id = "feed"></div>
<script>
function showCountries()
let xhr = new XMLHttpRequest()
xhr.open('GET', 'https://restcountries.com/v3.1/all', true)
xhr.onload = function()
if(xhr.status == 200)
console.log('success')
let countries = JSON.parse(this.response)
countries.forEach(country=>
const countryCard = document.createElement('div')
const countryCardImage = document.createElement('img')
countryCard.innerHTML = country.name
countryCardImage.src = country.flag
document.getElementById('feed').appendChild(countryCard)
)
xhr.send()
</script>
【问题讨论】:
您应该收到的 JSON 实际上是什么样的?name
不是字符串,flag
不是 URL。
点击按钮后,应该会在浏览器中显示国家名称和国旗
您能否提供一个 JSON 样本 - 它可能是与代码预期格式不同的 JSON
How can I access and process nested objects, arrays or JSON?
【参考方案1】:
终于搞明白怎么显示flags了,出处如下:
function showCountries()
let xhr = new XMLHttpRequest()
xhr.open('GET', 'https://restcountries.com/v3.1/all', true)
xhr.onload = function()
if(xhr.status == 200)
console.log('success')
let countries = JSON.parse(this.response)
countries.forEach(country=>
const countryCard = document.createElement('div')
const countryCardImage = document.createElement('div')// must be div to display small image
countryCard.innerHTML = country.name.common
countryCardImage.innerHTML = country.flag
console.log(country.flag)
document.getElementById('feed').appendChild(countryCard)
document.getElementById('feed').appendChild(countryCardImage) //this is it!
)
【讨论】:
【参考方案2】:因为country.name
是一个对象。你应该使用一个字符串来设置元素的innerHTML。
根据你的响应数据结构,你可以这样使用:
function showCountries()
let xhr = new XMLHttpRequest()
xhr.open('GET', 'https://restcountries.com/v3.1/all', true)
xhr.onload = function()
if (xhr.status == 200)
console.log('success')
let countries = JSON.parse(this.response)
countries.forEach(country =>
const countryCard = document.createElement('div')
const countryCardImage = document.createElement('img')
countryCard.innerHTML = country.name.common
countryCardImage.src = country.flags.png
countryCardImage.style.width = "30px"
countryCard.append(countryCardImage)
document.getElementById('feed').appendChild(countryCard)
)
xhr.send()
<button onclick="showCountries()">Show Countries</button>
<div id="feed"></div>
【讨论】:
成功了,非常感谢。 countryCardImage.src = country.flag 怎么样?它根本不显示图像。 我编辑我的回复以显示每个国家的国旗和名称,请查看。 哦,谢谢,我同时也想通了,但是你的解决方案更简洁 我的荣幸,如果我的回答有帮助,我将不胜感激将其标记为已接受的回复和/或投票赞成回答。谢谢 很高兴,非常感谢。我发布的解决方案将每个标志显示为 div 中的图标,这是目标。我不确定这是否是正确的解决方案,因为应该使用样式,但我们实现了目标。以上是关于尽管我从 API 获取数据,但我在 HTML 页面中的 Javascript JSON 代码不会呈现 RESTful API 数组对象。我该怎么办?的主要内容,如果未能解决你的问题,请参考以下文章
React useEffect() 无限重新渲染以获取所有尽管有依赖关系
为什么我的TextView为null,尽管我从数据库中获取值?
无法在 google adwords api 中获取要推送到数据库的活动数据