Hudson Mckie Hudson Mckie - 1 month ago 9
Ajax Question

Looping through an entire array - all indexes

For a task I need to display a list of albums' titles and all the songs. But I'm stuck only getting the first song to display for each album. How do I display them all? I assume I need to change the index value but I'm not sure how to write it to get all the values. My code is below.

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>

<script>
function loadDoc() {
// This function will load the xml file and connect it to the webpage
var xhttp = new XMLHttpRequest();
// This is used to exchange data with the server, allowing for parts of the page to change without reloading the page
xhttp.onreadystatechange = function() {
// This defines a function to be called when the readystate property changes
if (this.readyState == 4 && this.status == 200) {
// This states that if the request is finished (readystate == 4) and the status returned is ok (this.staus == 200)
extractSongs(this);
// This runs the function to display the data from the xml file
}
};
xhttp.open("GET", "CDLibrary.xml", true);
// This gets the xml file
xhttp.send();
// This sends a request to the server
}
function extractSongs(xml) {
// This function will extract and display data from the xml file
var i;
var xmlDoc = xml.responseXML;
// This returns the document containg a response to my request
var table="<tr><th>Artist</th><th>Title</th></tr>";
// This sets up the table
var CdList = xmlDoc.getElementsByTagName("CD");
// This creates an array of the data from the xml file
for (i = 0; i <CdList.length; i++) {
// This will loop through the array by the number of cds in the array
table += "<tr><td>" +
CdList[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"</td><td>" +
CdList[i].getElementsByTagName("track")[0].childNodes[0].nodeValue +
"</td></td>" ;
// These display the elements by the tag name and generate them as table data
}
document.getElementById("CdCollection").innerHTML = table;
// This gets the table from the html and makes it equal to the table from the javascript
}
</script>
</head>

<body>
<h1>My CD Collection</h1>

<button type="button" onclick="loadDoc()">Get my collection</button>
<br><br>
<table id="CdCollection"></table>
</body>



Answer

I'm guessing you need a 2nd for loop for the for the title/track:-

for (i = 0; i < CdList.length; i++) {

    var titleCount = CdList[i].getElementsByTagName("title").length;

    for (j = 0; j < titleCount; j++){

       // This will loop through the array by the number of cds in the array
       table += "<tr><td>" +
       CdList[i].getElementsByTagName("title")[j].childNodes[0].nodeValue +
       "</td><td>" +
       CdList[i].getElementsByTagName("track")[j].childNodes[0].nodeValue +
       "</td></td>";
       // These display the elements by the tag name and generate them as table data
    }
}
Comments