We Keep Coding

formatting HTML from arrays in a JSON file

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

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.

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(', ')

How can I give Unique ID's while building HTML with JS?

So I'm trying to build store functionality and what I would like to do is be able to save the information of each object to storage by pressing the "add to cart" button on the page. I'm wondering how I could go about creating unique ID's for each "add to cart" button while using a for loop to create more than one item/feature box like below?
// temporary javascript thingy while we build the remove catalogs
var popularItems =
[
{
"itemImageSrc" : "./images/StoreProducts/StrawberryPi2ModelB.jpg",
"itemImageAlt" : "placeholder",
"itemDescription" : "<p> Strawberry Pi 3 Model B </p>",
"itemPrice" : "<p>$49.95</p>",
"itemPopular" : "true"
},
{
"itemImageSrc" : "./images/StoreProducts/StrawberryPiZero.jpg",
"itemImageAlt" : "placeholder",
"itemDescription" : "<p> Strawberry Pi Zero </p>",
"itemPrice" : "<p>$29.95</p>",
"itemPopular" : "true"
},
{
"itemImageSrc" : "./images/StoreProducts/StrawberryPiCase.jpg",
"itemImageAlt" : "placeholder",
"itemDescription" : "<p> Strawberry Pi Case </p>",
"itemPrice" : "<p>$10.95</p>",
"itemPopular" : "true"
},
{
"itemImageSrc" : "./images/StoreProducts/placeholder.png",
"itemImageAlt" : "placeholder",
"itemDescription" : "<p> Strawberry Pi Extension Kit </p>",
"itemPrice" : "<p>$149.95</p>",
"itemPopular" : "false"
}
];
document.write( '<div class="feature-container">' );
for ( var i = 0; i < popularItems.length; i++) {
if ( popularItems[i].itemPopular == "true" ) {
document.writeln('<div class="feature-box">');
document.write('<img src="');
document.writeln(popularItems[i].itemImageSrc);
document.write('" alt="');
document.write(popularItems[i].itemImageAlt);
document.writeln('">');
document.write('<div class="feature-box-model" id="var i">');
document.write(popularItems[i].itemDescription);
document.writeln('</div>');
document.write('<div class="feature-box-price">');
document.write(popularItems[i].itemPrice);
document.writeln('</div>');
document.writeln('<FORM>');
document.writeln('<INPUT TYPE="button" VALUE="Add To Cart" onclick="saveData()" id="unique">');
document.writeln('</FORM>');
document.writeln('</div>');
}
}

you can modify this line:
document.writeln('<INPUT TYPE="button" VALUE="Add To Cart" onclick="saveData()" id="unique">');
to be:
document.writeln('<INPUT TYPE="button" VALUE="Add To Cart" onclick="saveData()" id="item_'+i+'">');

I'm assuming the obvious
`for( let =0; i<n; i++ ){
let key = 'key_'+i;
....
}'
doesn't meet your needs?
Then a simple approach might be something like:
`key = 'key_'+Math.random().toString().slice(2);`
`// => "key_21542707442294184"`

Append only working for first child - looping issue?

I have a for loop that appends an ordered list with a list item and a load of other info.
It works great for the first list item, however, the others do not populate/append.
I'm having trouble finding which part of my code is causing the issue:
<script>
$(document).ready(function(){
var artistID =$(".artist").attr('id');
$.get("songs.php?id="+artistID, function(data){
for (var j=0; j < data.length; j++){
$(".songs."+data[j].ArtistNumber).append(
'<li class="song">'+
'<a class="song-link" onclick="songClick();return false;" href="'+data[j].FileLocation+'">'+
'<p>'+data[j].Title+'</p>'+
'<small>'+data[j].duration+'</small>'+
'</a>'+
'</li>'
);
}
},'json');
});
</script>
Any help would be appreciated.
Edit:
It turns out all I needed was a $(".artist").each(function(){}) wrapped around that.
I hope this can be of help to someone.

After many comments, I finally get your point. Here is how to proceed : you want a nested 'each' loop.
Since you did not provide any data structure, I will assume it looks like this :
data = {
"123" : [
{
"title" : "song 1",
"fileLocation" : "someURL",
"duration" : "2m45s"
},
{
"title" : "song 2",
"fileLocation" : "someOtherURL",
"duration" : "4m10s"
}
],
"456" : [
{
"title" : "song 1",
"fileLocation" : "someNewURL",
"duration" : "3m20s"
},
{
"title" : "song 2",
"fileLocation" : "someOtherNewURL",
"duration" : "4m17s"
}
]
}
I assume your data is an object containing key/values, each key is the artist number and each value is a list (array) of songs of this artist (represented as object with details).
and here's how to exploit the data :
$.each(data, function(artistNumber, songs){ // Iterating through each artist/songs pair. songs is an array
$list = $(".songs." + artistNumber); // Select each list one by one in the dom
$.each(songs, function(index, song){ // song is an object
$list.append(
'<li class="song">'+
'<a class="song-link" onclick="songClick();return false;" href="'+song.fileLocation+'">'+
'<p>'+song.title+'</p>'+
'<small>'+song.duration+'</small>'+
'</a>'+
'</li>'
);
});
});
See this fiddle in action.

I'm not shure about your DOM, I would need your HTML, but here is a try :
<script>
$(document).ready(function(){
var artistID =$(".artist").attr('id');
$.get("songs.php?id="+artistID, function(data){
for (var j=0; j < data.length; j++){
$(".artist").append($("<ul />").addClass(data[j].ArtistNumber).addClass('songs'));
$(".songs."+data[j].ArtistNumber).html(
'<li class="song">'+
'<a class="song-link" onclick="songClick();return false;" href="'+data[j].FileLocation+'">'+
'<p>'+data[j].Title+'</p>'+
'<small>'+data[j].duration+'</small>'+
'</a>'+
'</li>'
);
}
},'json');
});

And this still will not ,because you make selector for class,and this get first item with class artist,you need to change selector.Try thiseach

Dynamic dropdown list using JavaScript object

I want to make a dynamic drop-down list based on a JavaScript object like this:
var EXERCISE_OBJ = {
"title" : {
"name" : "Exercise_Name",
"category" : "Pronunciation",
"type":"Multiple Choice",
},
"title2" : {
"name" : "Exercise_Name2",
"category" : "Spelling",
"type":"Crossword",
},
"title3" : {
"name" : "Exercise_Name3",
"category" : "Spelling",
"type":"Multiple Choice",
},
"title4" : {
"name" : "Exercise_Name4",
"category" : "Grammar",
"type":"Wordsearch",
},
}
I want a drop-down list enlisting all the categories and another one displaying all the exercise titles from each category.. How can I output it?

Please try this:
Create div with id test. <div id="test"></div>
var exercise_select = "<select name='exc'>";
var category_select = "<select name='cate'>";
$.each(EXERCISE_OBJ, function() {
var name = this.name;
var category = this.category;
exercise_select += "<option value='"+name+"'>"+name+"</option>";
category_select += "<option value='"+category+"'>"+category+"</option>";
});
exercise_select += "</select>"; category_select += "</select>";
$("#test").append(exercise_select); $("#test").append(category_select);

Pulling parts of JSON out to display them in a list

I have the following JSON:
var questions = {
section: {
"1": question: {
"1": {
"id" : "1a",
"title": "This is question1a"
},
"2": {
"id" : "1b",
"title": "This is question2a"
}
},
"2": question: {
"1": {
"id" : "2a",
"title": "This is question1a"
},
"2": {
"id" : "2b",
"title": "This is question2a"
}
}
}
};
NOTE: JSON changed based on the answers below to support the question better as the original JSON was badly formatted and how it works with the for loop below.
The full JSON will have 8 sections and each section will contain 15 questions.
The idea is that the JS code will read what section to pull out and then one by one pull out the questions from the list. On first load it will pull out the first question and then when the user clicks on of the buttons either option A or B it will then load in the next question until all questions have been pulled and then do a callback.
When the button in the appended list item is clicked it will then add it to the list below called responses with the answer the user gave as a span tag.
This is what I have so far:
function loadQuestion( $section ) {
$.getJSON('questions.json', function (data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (item === $section) {
$('#questions').append('<li id="' + item.section.questions.question.id + '">' + item.section.questions.question.title + ' <button class="btn" data-response="a">A</button><button class="btn" data-response="b">B</button></li>');
}
}
});
}
function addResponse( $id, $title, $response ) {
$('#responses').append('<li id="'+$id+'">'+$title+' <span>'+$response+'</span></li>');
}
$(document).ready(function() {
// should load the first question from the passed section
loadQuestion( $('.section').data('section') );
// add the response to the list and then load in the next question
$('button.btn').live('click', function() {
$id = $(this).parents('li').attr('id');
$title = $(this).parents('li').html();
$response = $(this).data('response');
addResponse( $id, $title, $response );
loadQuestion ( $('.section').data('section') );
});
});
and the HTML for the page (each page is separate HTML page):
<div class="section" data-section="1">
<ul id="questions"></ul>
<ul id="responses"></ul>
</div>
I've become stuck and confused by how to get only the first question from a section and then load in each question consecutively for that section until all have been called and then do a callback to show the section has been completed.
Thanks

Do not have multiple id's in html called "section."
Do not have multiple keys in your JSON on the same level called "section". Keys in JSON on the same level should be unique just as if you are thinking about a key-value hash system. Then you'll actually be able to find the keys. Duplicate JSON keys on the same level is not valid.
One solution can be section1, section2, etc. instead of just section. Don't rely on data-section attribute in your HTML - it's still not good if you have "section" as the duplicate html id's and as duplicate JSON keys.
If you have only one section id in HTML DOM, then in your JSON you must also have just one thing called "section" e.g.:
var whatever = {
"section" : {
"1": {
"question" : {
"1" : {
"id" : "1a",
"title" : "question1a"
},
"2" : {
"id" : "2a",
"title" : "question2a"
}
}
},
"2": {
"question" : {
"1" : {
"id" : "1a",
"title" : "aquestion1a"
},
"2" : {
"id" : "2a",
"title" : "aquestion2a"
}
}
}
}
}
console.log(whatever.section[1].question[1].title); //"question1a"
To get question, do something like this:
function loadQuestions(mySectionNum) {
$.getJSON('whatever.json', function(data){
var layeriwant = data.section[mySectionNum].question;
$.each(layeriwant, function(question, qMeta) {
var desired = '<div id="question-' +
qMeta.id +
'"' +
'>' +
'</div>';
$("#section").append(desired);
var quest = $("#question-" + qMeta.id);
quest.append('<div class="title">' + qMeta.title + '</div>');
//and so on for question content, answer choices, etc.
});
});
}
then something like this to actually get the questions:
function newQuestion(){
var myHTMLSecNum = $("#section").attr('data-section');
loadQuestions(myHTMLSecNum);
}
newQuestion();
//below is an example, to remove and then append new question:
$('#whatevernextbutton').on('click',function(){
var tmp = parseInt($("#section").attr('data-section'));
tmp++;
$("#section").attr('data-section', tmp);
$("#section").find('*').remove();
newQuestion();
});

Technically your getJSON function always retrieves the same data. Your code never compares the id given to the id you're extracting.
Your getJSON should look something like:
function loadQuestion( $section ) {
for (var i = 0; i < questions.section.length; i++) {
var item = questions.section[i];
if (item.id === $section) {
for (var j = 0; j < item.questions.length; j++) {
$('#questions').append('<li id="' +
item.questions[i].id + '">' +
item.questions[i].title +
' <button class="btn" data-response="a">A</button><button class="btn" data-response="b">B</button></li>'
);
}
}
}
}
Modify your JSON to:
var questions = {
section: [{
id: 1,
questions: [{
id: "1a",
title: "This is question1a"
},{
id: "2a",
title: "This is question2a"
}]},{
id: 2,
questions: [{
id: "1a",
title: "This is question1a"
},{
id: "2a"
title: "This is question2a"
}]
}]
};
Edit: your first parameter of getJSON is the URL of the JSON returning service.
You don't need getJSON at all if your JSON is already defined on the client. I have modified the code above.