JSON / WP Sample

Here’s the sample of a JSON-list looped out by JavaScript. In this way you can use and reuse your coded objects. Please note that the links to the images point to the media files in the WordPress installation. You can get the links to the images in the Dashboard.

The Code

<div id="result"></div>

<script>
 
 let bands = {
  "List": [
    {
      "Band": "The Kinks",
      "Stage": "Blue",
      "Image": "https://thoth.dk/wp-content/uploads/2023/03/image-4.png"
    },
    {
      "Band": "Velvet Underground",
      "Stage": "Orange",
      "Image": "https://thoth.dk/wp-content/uploads/2023/03/punk.jpeg"
    },
    {
      "Band": "Aura",
      "Stage": "Green",
      "Image": "https://thoth.dk/wp-content/uploads/2023/03/image-3.png"
    },
    {
      "Band": "Ozzy Osborne",
      "Stage": "Black",
      "Image": "https://thoth.dk/wp-content/uploads/2023/03/manga-band.jpeg"
    },
    {
      "Band": "Mozart Rock Experience",
      "Stage": "Pink",
      "Image": "https://thoth.dk/wp-content/uploads/2023/03/manga-band.jpeg"
    },
    {
      "Band": "Sigurds Ulvetime",
      "Stage": "Blue",
      "Image": "https://thoth.dk/wp-content/uploads/2023/03/manga-band.jpeg"
    },
    {
      "Band": "Pink Floyd",
      "Stage": "Orange",
      "Image": "https://thoth.dk/wp-content/uploads/2023/03/manga-band.jpeg"
    }
  ]
}

for ( let i = 0; i<bands.List.length; i++ ){
    result.innerHTML += "<div>" 
    result.innerHTML +=  "<img src='" + bands.List[i].Image + "'class='respImg' alt='Band image'>" 
	result.innerHTML += bands.List[i].Band + "<br>" 
    result.innerHTML += "</div>" 

}

</script>

Result

Stage: Orange