循环遍历整个数组 - 所有索引答案

【问题标题】：Looping through an entire array - all indexes循环遍历整个数组 - 所有索引
【发布时间】：2016-10-23 18:28:41
【问题描述】：

对于一项任务，我需要显示专辑标题和所有歌曲的列表。但我坚持只为每张专辑显示第一首歌曲。如何全部显示？我假设我需要更改索引值，但我不确定如何编写它来获取所有值。我的代码如下。

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

【问题讨论】：

显示你的 xml 文件
Adiemus: Songs of Sanctuary Karl Jenkins（作曲家）Adiemus3 :48Tintinnabulum10:57Cantus Inaequalis3:13Cantus Insolitus track> 5:35 这只是一个文件的sn-p，一路基本一样。
它只是列表中的一项。你怎么能指望打印所有的歌曲
我不明白你的意思，所有曲目都需要在同一个标签内吗？
w3schools.com/xml/cd_catalog.xml 像这样

标签： javascript arrays ajax xml loops

【解决方案1】：

我猜你需要第二个for 循环来为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
    }
}

【讨论】：

这并没有改变显示的数据。