尽管我从 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 中获取要推送到数据库的活动数据

页面大小和页面如何在获取客户资产中工作在 thingsboard rest api 中?

通过 API 从 mediawiki 页面获取文本内容