How to display JSON array of objects "Individually" on DOM and wrap the data inside a div?-CodePudding

I have this Array of JSON data that's coming from a external file:

'https://www.....json=1&callback=TestVideos'; .

I am having a problem displaying the data for each object individually in a div. Currently in my code all the JSON data gets printed to the DOM all under one div. What I was aiming is for the data to get printed under a div for each object and it properties. For example there should be five of this <div > for each object. For example:

<div >
   "id": "12",
   "title": "Video Title A",
   "link": "",
    "description": "",
</div>
<div >
   "id": "123",
   "title": "Video Title A",
   "link": "",
    "description": "",
</div>...

Visually I am trying to aim for something like this: example

This is how the JSON looks:

{
    "TestVideos": [
        {
            "id": "12",
            "title": "Video Title A",
            "link": "",
            "description": "",

        },
        {
            "id": "123",
            "title": "Video Title B",
            "link": "",
            "description": "",
        },
        {
            "id": "1234",
            "title": "Video Title C",
            "link": "",
            "description": "",
        },
        {
            "id": "12345",
            "title": "Video Title D",
            "link": "",
            "description": "",
        },
        {
            "id": "123456",
            "title": "Video Title F",
            "link": "",
            "description": "",
        }
    ]
}

JavaScript Code:

<html>
<body>
    <div >
        <h2>Latest Videos</h2>
        <i  aira-hidden="true"></i>
        <div id="contentBody" >
            <div >
                <a href="" title="">
                    <div ></div>
                    <div >
                        <h3 ></h3>
                        <span ></span>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function TestVideos(response) {
 
            for (var i = 0; i < response.length; i  ) {
                document.getElementById("contentBody").innerHTML  =  response[i].id;
                document.getElementById("contentBody").innerHTML  =  response[i].title;
                document.getElementById("contentBody").innerHTML  =  response[i].link;
                document.getElementById("contentBody").innerHTML  =  response[i].description;
                
                document.write('<br/>');
            }
        }
        var script = document.createElement('script');
        script.src = 'https.....json=1&callback=TestVideos';
        document.body.appendChild(script);
 
    </script>
</body>
</html>

CodePudding user response：

You can start with it.

const response = {
    "TestVideos": [
        {
            "id": "12",
            "title": "Video Title A",
            "link": "",
            "description": "",

        },
        {
            "id": "123",
            "title": "Video Title B",
            "link": "",
            "description": "",
        },
        {
            "id": "1234",
            "title": "Video Title C",
            "link": "",
            "description": "",
        },
        {
            "id": "12345",
            "title": "Video Title D",
            "link": "",
            "description": "",
        },
        {
            "id": "123456",
            "title": "Video Title F",
            "link": "",
            "description": "",
        }
    ]
}

const contentDiv = document.querySelector("#contentBody");

response.TestVideos.forEach(video=>{
    let newDiv=document.createElement("div");
    newDiv.classList  ="videoItem col-lg-3 col-md-4 col-sm-6 col-xs-12";
    let atag = document.createElement("a");

    let childDiv = document.createElement("div");
    childDiv.innerHTML ="id:" video.id "<br>";
    childDiv.innerHTML  ="title:" video.title "<br>";
    childDiv.innerHTML  ="link:" video.link "<br>";
    childDiv.innerHTML  ="description:" video.description "<br>";

    
    atag.append(childDiv);
    newDiv.append(atag);
  contentDiv.append(newDiv);
})

<style>
    #contentBody{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
</style>

CodePudding user response：

You may replace the for loop with the following:

function TestVideos(response) {
  let contentBody = document.getElementById("contentBody");
  for (var i = 0; i < 4; i  ) {
    let temp = "<div class = \"videoItem col-lg-3 col-md-4 col-sm-6 col-xs-12\">";
    temp  = "<a href=\""   reponse[i].link   "\" title=\""   response[i].title   "\>";
    temp  = "<div class=\"videoImage\" style=\"background-image:url("   response[i].imageThumbnail   ")\">";
    temp  = "<div class = \"videoDescription\">";
    temp  = "<h3 class = \"videoTitle\">";
    temp  = response[i].title;
    temp  = "</h3>";
    temp  = " <span class =\"tileTextDescription\">";
    temp  = " <p>"   response[i].description   "</p>";
    temp  = " </span>";
    temp  = "</div>";
    temp  = "</div>";
    temp  = "</a>";
    temp  = "</div>";
    contentBody.innerHTML  = temp;
  }
}