如何在HTML5中的不同位置打印陣列的動態內容

Question

我必須從數組中的PHP Web服務獲取數據，然後使用JavaScript將其顯示在HTML頁面上。我已使用for循環來執行此操作。但它沒有提供正確的輸出。由於innerHTML輸出被替換。請幫助你的建議。這裏是我的代碼：

function jsondata(data){ 
    alert("JSONdata"); 
    var parsedata = JSON.parse(JSON.stringify(data)); 
    var main_category = parsedata["main Category"]; 
    for (var i = 0; i <= main_category.length; i++) { 
     menu = JSON.parse(JSON.stringify(main_category[i])); 
     menu_id[i] = menu['mcatid']; 
     menu_title[i] = menu['mcattitle']; 
     menu_img[i] = menu['mcatimage']; 
     pop_array.push(menu_id[i], menu_title[i], menu_img[i]); 
     //alert(pop_array); 
     for (var i = 0; i < main_category.length; i++) { 
      alert("for start"); 
      var category = document.createElement("li"); 
      document.getElementById("mylist").appendChild(category); 
      //document.getElementById("mylist").innerHTML='<table><tr><td>'+pop_array[i]+'</td></tr></table>'; 
      document.write(pop_array.join("<br></br>")); 
      alert("for end"); 
     } 
    } 
} 

Answer 1

雖然我不知道爲什麼pop_array用在這裏，但我認爲你正試圖顯示category信息作爲li標籤。

您應該設置category.innerHTML而不是document.getElementById("mylist").innerHTML。

function jsondata(data){ 
    var parsedata = JSON.parse(JSON.stringify(data)); 
    var main_category = parsedata["main Category"]; 

    for (var i = 0; i < main_category.length; i++) { 
     var menu = main_category[i]; 
     var category = document.createElement("li"); 
     category.innerHTML = menu['mcattitle'];  // construct your own html here 
     document.getElementById("mylist").appendChild(category); 
    } 
}