formatting HTML from arrays in a JSON file

Question

I've gone through 5-6 questions on SO before asking _ The other questions appear to refer to formatting all the data from complete JSON files _ This question is about formatting the elements of an array parsed from a JSON file _

The complete test page is online here but for the sake of brevity on this page I have shortened the JSON data _

{
    "PGRgames" : [
        {
            "id" : "Abzu",
            "fullName" : "Abzû",
            "PEGI" : 7,
            "platforms" : ["PS4"],
            "genres" : ["Adventure", "Simulation"],
            "image" : "img_Abzu.png",
            "details" : "ABZÛ is a beautiful underwater adventure that evokes the dream of diving. Immerse yourself in a vibrant ocean world full of mystery and bursting with colour and life."
        },
        {
            "id" : "AdventurePirates",
            "fullName" : "Adventure Time: Pirates Of The Enchridion",
            "PEGI" : 7,
            "platforms" : ["XBoxOne", "PS4", "Switch"],
            "genres" : ["Adventure", "Sandbox", "KIDS"],
            "image" : "img_AdventurePirates.png",
            "details" : "The Land of Ooo is underwater and it’s up to Finn and Jake to find out why.  Join our heroes as they explore the high seas."
        },
        {
            "id" : "KingdomCome",
            "fullName" : "Kingdom Come: Deliverance",
            "PEGI" : 18,
            "platforms" : ["XBoxOne", "XBoxOneX", "PS4"],
            "genres" : ["Action", "RPG"],
            "image" : "img_KingdomCome.png",
            "details" : "Massive realistic open world: Majestic castles, vast fields, all rendered in stunning high-end graphics. Solve quests in multiple ways, then face the consequences of your decisions."
        }
    ]
}

My JS code is _

<script>
let askHTTP = new XMLHttpRequest();
            askHTTP.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    let gamesList = JSON.parse(askHTTP.responseText);
                    let output = '';
                    let PGRgames = gamesList.PGRgames;
                    for (let i = 0; i < PGRgames.length; i++) {
                        output += '<div class="col-md-3 col-sm-6 padBox"><div class="gameBox center"><img src="media/' 
                        + PGRgames[i].image 
                        + '" /><div class="horizBuffer"></div>' 
                        + '<div class="center"><span class="fontBrand1 smallText"><strong>' + PGRgames[i].genres + '</strong></span></div>'
                        + '<div class="horizBuffer"></div>'
                        + '<div class="left"><span class="fontBlack text">' + PGRgames[i].details + '</span></div>'
                        + '<div class="horizBuffer"></div>'
                        + '<div class="center"><span class="fontBlack text"><strong>' + PGRgames[i].platforms + '</strong></span></div>'
                        + '</div></div>';  
                    }
                    document.getElementById('displayGames').innerHTML = output;
                }
            };
            askHTTP.open("GET", "js/PGRgames.json", true);
            askHTTP.send();

</script>

If you look at the content on the page I have linked to you'll see that PGRgames.genres & PGRgames.platforms have commas but no spaces between the array elements _ Also that the arrays are not conforming to the area they are supposed to be confined to _

Formatting these two arrays is specifically what my question refers to _ I'd be grateful for any assistance : )

Rauli Rajande · Accepted Answer · 2019-04-27 15:37:32Z

1

You can use .join() to format array to string.

var array = ["foo", "bar", "tet"];

console.log('formatted:', array.join(', '));

console.log('tostring:', ''+array);

In your case replace PGRgames[i].genres with PGRgames[i].genres.join(', ') and other array outputs in similar manner.

answered Apr 27, 2019 at 15:37

Rauli Rajande

2,0201 gold badge21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

inputforcolor Over a year ago

That worked Rauli! I used PGRgames[i].genres.join(' ') because I didn't want the comma _ Many Thanks

Yair I · Accepted Answer · 2019-04-27 15:46:45Z

1

your problem is that you write this line:

PGRgames[1].platforms

and it is like writing this:

PGRgames[1].platforms.toString()

and what it does is just use the tostring of each element in the array and connect them with comma.

what you need to do is use join to tha array and format it as you need like this:

PGRgames[1].platforms.join(', ')

answered Apr 27, 2019 at 15:46

Yair I

1,1581 gold badge6 silver badges9 bronze badges

Collectives™ on Stack Overflow

formatting HTML from arrays in a JSON file

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related