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?

Question

enter image description hereThe 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>

What does the JSON you're supposed to be receiving actually look like? — Andrew Corrigan, Dec 06 '21 at 16:54
On click of the button, it supposed to display names of the countries and their flags in browser — Svetlana Gulotta, Dec 06 '21 at 16:55
Could you provide a sample of the JSON - it could be the JSON that is in a different format to what the code expects — Andrew Corrigan, Dec 06 '21 at 17:00
[How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/q/11922383) — gre_gor, Dec 06 '21 at 17:03

Saeed Shamloo · Accepted Answer · 2021-12-08T04:50:54.023

0

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:

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>

edited Dec 08 '21 at 04:50

answered Dec 06 '21 at 17:10

Saeed Shamloo

6,199
1
7
18

It worked, thank you so much. How about countryCardImage.src = country.flag ? It does not display the image at all. – Svetlana Gulotta Dec 08 '21 at 04:43
I editet my response to display flag and name of every country, please check it out. – Saeed Shamloo Dec 08 '21 at 04:49
Oh thank you, I figured it out too at the same time, but your solution is cleaner – Svetlana Gulotta Dec 08 '21 at 05:07
My Pleasure, If my asnwer was helpful I would appreciate it to mark it as accepted response and/or upvote to answer. thanks – Saeed Shamloo Dec 08 '21 at 05:08
With pleasure, thank you very much. The solution I posted displays each flag as icon in div which was the objective. I am not sure if it is the proper solution since the style should be used, but we achieved the goal. – Svetlana Gulotta Dec 08 '21 at 05:22

score 0 · Answer 2 · answered Dec 08 '21 at 05:04

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

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?

2 Answers2