My Javascript JSON code in HTML page does not render the RESTful API array objects, although I get the data from the API. 我应该怎么办？

Question

enter image description here The problem is that the objects of the API are not being rendered in HTML, what did I do wrong?

       <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> 
      

Answer 1

Because country.name is an object.You should use an string to set the innerHTML of element. According to your response data structure, you can use it like this:

countryCard.innerHTML = country.name.common; // or any other property

Answer 2

I finally figured out how to display flags, here is the source:

                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!
                    })
                }
            }