尽管我从 API 获取数据，但我在 HTML 页面中的 Javascript JSON 代码不会呈现 RESTful API 数组对象。我该怎么办？

Posted 2023-02-14

【中文标题】尽管我从 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 中的图标，这是目标。我不确定这是否是正确的解决方案，因为应该使用样式，但我们实现了目标。