Javascript：用於循環打印輸出2D數組的嵌套

-1

我在嵌套for循環中打印2D數組時遇到問題。我在javascript中創建了對象，方法，數組和對象數組，現在我想通過使用for循環和2D數組來顯示值。我嘗試了我所知道的方法，但沒有按照我的預期得到輸出。誰能幫幫我嗎？Javascript：用於循環打印輸出2D數組的嵌套

code: 

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <title> Trial </title> 
    <script type="text/javascript"> 

     function item(item_name, item_taste, item_description) { 
      this.name = item_name; 
      this.taste = item_taste; 
      this.description = item_description;  
      this.display = displayClass; 
     } 

     function displayClass(){ 
      document.documentElement.className = 'js'; 
      document.write(this.name); 
      document.write(this.taste); 
      document.write(this.item_description); 
      document.write('<br />'); 
      } 

      var myItem = new item("Pani Puri", "Spicy", "Crispy shells, Potatoes & Onions Served with sweet & chilled Tangy mintwater"); 
      var myItem2 = new item("Aloo Tikki", "Spicy", "2 Whole Wheat Fried Breads Served With Potato Curry"); 
      var myItem3 = new item("Papri chat", "Spicy", "Homemade chips, lentil dumplings, garbanzo bean, potato yogurt, chutney, onion & spices"); 

      var myItem4 = new item("Chicken Palak", "Meduim Spicy", "Boneless Chicken Cooked In Hot Spicy Sauce With Potatoes"); 
      var myItem5 = new item ("Chicken Korma", "Meduim Spicy", "Chicken In A Mild Creamy Sauce & Cashew Nuts"); 
      var myItem6 = new item("Chicken Masala", "Spicy", "Bite Sized Chicken Cooked In An Onion Based Sauce"); 

      var myItem7 = new item("Kheer", "Sweet", " Indian Rice Pudding Spiced With Cardamom"); 
      var myItem8 = new item("Rasmalai", "Sweet", "Made From Homemade Style Fresh Cheese In Sweetned Milk"); 
      var myItem9 = new item("Gulab Jamun", "Sweet", "Sweet Round Shaped Pastry Fried & Soaked In Flavored Syrup"); 


      property = new Array("Varieties", "Taste", "Item Description"); 
      category = new Array("Chaats", "Chicken", "Dessert"); 

      chaats = new Array(myItem, myItem2, myItem3); 
      chicken = new Array(myItem4, myItem5, myItem6); 
      dessert = new Array(myItem7, myItem8, myItem9); 

      var cat = new Array(chaats, chicken, dessert); 

     </script> 
     </head> 
     <body> 
     <table border="4", align="center", cellpadding="5", cellspacing="5" >    
      <thead> 
       <tr> 
        <script type="text/javascript">       
          for (i = 0; i < 3; i++) { 
          document.write('<th>'+ property[i] +'</th>'); } 

        </script> 
       </tr> 
      </thead> 
       <tbody> 
       <tr> 
        <script type="text/javascript"> 
         for (j = 0; j < 3; j++) {  
          document.write("<th><tr>" + category[j] + "</tr></th>"); 
         for (k = 0; k < 3; k++) { 
          document.write("<td>" + cat[j][k] + "</td>"); 
         } 
         } 
        </script> 
       </tr> 
      </tbody> 
     </table> 
     </body> 
     </html>

預期輸出：

輸出：

來源

2017-09-24 pooja gajera

它不是'」「+ category [j] +」「'tr是表格，並且在** t ** able ** h ** ead標記之前定義了 –

你得到[object Object]，因爲這是任何對象的toString()的價值。例如，如果你輸入這個到開發工具JavaScript控制檯，你會看到：

> var myObject = {hello: 'world'} 
> myObject.toString() 
"[object Object]"

您需要添加一個定義item.prototype.toString確定你希望如何顯示這些對象。例如，你可以使用這個片段：

item.prototype.toString = function (category){ 
    return '<tr><th>' + 
    category + ' </th><td>' + 
    this.name + ' </td><td>' + 
    this.taste + '</td><td>' + 
    this.description + '</td></tr>'; 
}

然後修改最後一個腳本標籤有：

    for (j = 0; j < 3; j++) { 
         for (k = 0; k < 3; k++) { 
         document.write(cat[j][k]); // calls our item.toString() method 
         } 
        }

對於最後的結果看起來像以下（點擊運行代碼片段，看看輸出）：

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <title> Trial </title> 
 
    <script type="text/javascript"> 
 

 
     function item(item_name, item_taste, item_description) { 
 
      this.name = item_name; 
 
      this.taste = item_taste; 
 
      this.description = item_description;  
 
      this.display = displayClass; 
 
     } 
 

 
item.prototype.toString = function (category){ 
 
    return '<tr><th>' + 
 
    category + ' </th><td>' + 
 
    this.name + ' </td><td>' + 
 
    this.taste + '</td><td>' + 
 
    this.description + '</td></tr>'; 
 
} 
 

 
     function displayClass(){ 
 
      document.documentElement.className = 'js'; 
 
      document.write(this.name); 
 
      document.write(this.taste); 
 
      document.write(this.item_description); 
 
      document.write('<br />'); 
 
      } 
 

 
      var myItem = new item("Pani Puri", "Spicy", "Crispy shells, Potatoes & Onions Served with sweet & chilled Tangy mintwater"); 
 
      var myItem2 = new item("Aloo Tikki", "Spicy", "2 Whole Wheat Fried Breads Served With Potato Curry"); 
 
      var myItem3 = new item("Papri chat", "Spicy", "Homemade chips, lentil dumplings, garbanzo bean, potato yogurt, chutney, onion & spices"); 
 

 
      var myItem4 = new item("Chicken Palak", "Meduim Spicy", "Boneless Chicken Cooked In Hot Spicy Sauce With Potatoes"); 
 
      var myItem5 = new item ("Chicken Korma", "Meduim Spicy", "Chicken In A Mild Creamy Sauce & Cashew Nuts"); 
 
      var myItem6 = new item("Chicken Masala", "Spicy", "Bite Sized Chicken Cooked In An Onion Based Sauce"); 
 

 
      var myItem7 = new item("Kheer", "Sweet", " Indian Rice Pudding Spiced With Cardamom"); 
 
      var myItem8 = new item("Rasmalai", "Sweet", "Made From Homemade Style Fresh Cheese In Sweetned Milk"); 
 
      var myItem9 = new item("Gulab Jamun", "Sweet", "Sweet Round Shaped Pastry Fried & Soaked In Flavored Syrup"); 
 

 

 
      property = new Array("Varieties", "Taste", "Item Description"); 
 
      category = new Array("Chaats", "Chicken", "Dessert"); 
 

 
      chaats = new Array(myItem, myItem2, myItem3); 
 
      chicken = new Array(myItem4, myItem5, myItem6); 
 
      dessert = new Array(myItem7, myItem8, myItem9); 
 

 
      var cat = new Array(chaats, chicken, dessert); 
 

 
     </script> 
 
     </head> 
 
     <body> 
 
     <table border="4", align="center", cellpadding="5", cellspacing="5" >    
 
      <thead> 
 
       <tr> 
 
        <th></th> 
 
        <script type="text/javascript">       
 
          for (i = 0; i < 3; i++) { 
 
          document.write('<th>'+ property[i] +'</th>'); } 
 

 
        </script> 
 
       </tr> 
 
      </thead> 
 
       <tbody> 
 
       <tr> 
 
        <script type="text/javascript"> 
 
         for (j = 0; j < 3; j++) {  
 
          // document.write("<tr><th colspan='3'>" + category[j] + "</th></tr>"); 
 
         for (k = 0; k < 3; k++) { 
 
          document.write(cat[j][k].toString(category[j])); 
 
         } 
 
         } 
 
        </script> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
     </body> 
 
     </html>

來源

2017-09-24 21:23:07

感謝您的幫助，但我被告知使用簡單for循環並打印值。我無法使用JSON ...你能否以我編碼的方式建議我？ –

我修改了我的答案，我認爲這會對您的示例代碼更好用... –

好的謝謝。讓我試試 –

Javascript：用於循環打印輸出2D數組的嵌套

回答

相關問題