爲什麼我的循環創建重複結果？

Question

我想從javascript中循環創建可摺疊列表（jQuery手機）。從那個循環中，我希望可摺疊列表從json對象中獲取內容。我用於循環的對象支撐是tipe，但不知何故它創建了所有tipe的可摺疊列表，但我想要的不是全部tipe
（例如來自json的tipe是「ESL」，「ESL」，「ESL」，「UHT 「，」UHT「，」WHP「，」WHP「，」WHP「，」WHP「，並且我想要創建像」ESL「，」UHT「，」WHP「的可摺疊列表）

這裏是我已經做了迄今爲止>>http://jsfiddle.net/sevtiandy/seXmc/36/

for (i = 0; i < data[result].length; i++) { 
     details += 
"<div data-role='collapsible' data-collapsed='true' data-theme='b' data-content-theme='c'>"+ 
"<h3>" + data[result][i].tipe + "</h3>"+ 
"<table width='100%' border='1' id='"+data[result][i].tipe+"'>"+ 
    "<tr>"+ 
     "<td rowspan='3' align='center' valign='middle' bgcolor='#CCCCCC'>MARKET CHANNEL</td>"+ 
     "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>"+bulan3+"</td>"+ 
     "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>"+bulan2+"</td>"+ 
     "<td colspan='8' align='center' valign='middle' bgcolor='#CCCCCC'>"+bulan1+"</td>"+ 
    "</tr>"+ 
    "<tr>"+ 
     "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>ACT.</td>"+ 
     "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>ACT.</td>"+ 
     "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>PRO.</td>"+ 
     "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>ACT.</td>"+ 
     "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>BUD.</td>"+ 
     "<td colspan='2' align='center' valign='middle' bgcolor='#CCCCCC'>ACV. (%)</td>"+ 
    "</tr>"+ 
    "<tr>"+ 
     "<td align='center' valign='middle' bgcolor='#CCCCCC'>VAL</td>"+ 
     "<td align='center' valign='middle' bgcolor='#CCCCCC'>%</td>"+ 
     "<td align='center' valign='middle' bgcolor='#CCCCCC'>VAL</td>"+ 
     "<td align='center' valign='middle' bgcolor='#CCCCCC'>%</td>"+ 
     "<td align='center' valign='middle' bgcolor='#CCCCCC'>VAL</td>"+ 
     "<td align='center' valign='middle' bgcolor='#CCCCCC'>%</td>"+ 
     "<td align='center' valign='middle' bgcolor='#CCCCCC'>VAL</td>"+ 
     "<td align='center' valign='middle' bgcolor='#CCCCCC'>QTY</td>"+ 
     "<td align='center' valign='middle' bgcolor='#CCCCCC'>VAL</td>"+ 
     "<td align='center' valign='middle' bgcolor='#CCCCCC'>QTY</td>"+ 
     "<td align='center' valign='middle' bgcolor='#CCCCCC'>VAL</td>"+ 
     "<td align='center' valign='middle' bgcolor='#CCCCCC'>QTY</td>"+ 
    "</tr>"+  
"</table>"+ 
"</div>"; 
    } 

    $("#tipe_" + kodenegara) 
     .empty() 
     .append(details) 
     .trigger('create'); 
    $("#tipe_" + kodenegara).ready(function() { 
     $('table.alt tr:odd').addClass('odd'); 
     $('table.alt tr:even').addClass('even'); 
    }); 

這裏是數組：

"GetReportIdResult": [ 
    { 
     "act_qty1": "834", 
     "act_val1": "11", 
     "acvqty": "0.99", 
     "acvval": "0.84", 
     "budqty": "84332", 
     "budval": "1315", 
     "bulan1": "7", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "21.9", 
     "cm_per2": "31.8", 
     "cm_per3": "29.2", 
     "cm_val1": "2", 
     "cm_val2": "206", 
     "cm_val3": "356", 
     "mc": "Agen", 
     "tipe": "ESL" 
    }, 
    { 
     "act_qty1": "17076", 
     "act_val1": "186", 
     "acvqty": "36.01", 
     "acvval": "38.64", 
     "budqty": "47416", 
     "budval": "482", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "8.6", 
     "cm_per2": "7.0", 
     "cm_per3": "8.1", 
     "cm_val1": "16", 
     "cm_val2": "47", 
     "cm_val3": "54", 
     "mc": "Hotel & Restaurant", 
     "tipe": "ESL" 
    }, 
    { 
     "act_qty1": "30948", 
     "act_val1": "299", 
     "acvqty": "16.48", 
     "acvval": "16.22", 
     "budqty": "187788", 
     "budval": "1841", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "-3.2", 
     "cm_per2": "-3.1", 
     "cm_per3": "-3.1", 
     "cm_val1": "-10", 
     "cm_val2": "-61", 
     "cm_val3": "-55", 
     "mc": "Institution", 
     "tipe": "ESL" 
    }, 
    { 
     "act_qty1": "8358", 
     "act_val1": "121", 
     "acvqty": "37.96", 
     "acvval": "35.26", 
     "budqty": "22019", 
     "budval": "342", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "26.7", 
     "cm_per2": "28.4", 
     "cm_per3": "30.1", 
     "cm_val1": "32", 
     "cm_val2": "128", 
     "cm_val3": "155", 
     "mc": "Lower Trade", 
     "tipe": "ESL" 
    }, 
    { 
     "act_qty1": "53433", 
     "act_val1": "943", 
     "acvqty": "19.45", 
     "acvval": "19.48", 
     "budqty": "274742", 
     "budval": "4844", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "31.2", 
     "cm_per2": "31.2", 
     "cm_per3": "31.2", 
     "cm_val1": "295", 
     "cm_val2": "1423", 
     "cm_val3": "1567", 
     "mc": "Modern Market", 
     "tipe": "ESL" 
    }, 
    { 
     "act_qty1": "0", 
     "act_val1": "0", 
     "acvqty": "0.00", 
     "acvval": "0.00", 
     "budqty": "732", 
     "budval": "13", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "0.0", 
     "cm_per2": "34.5", 
     "cm_per3": "34.8", 
     "cm_val1": "0", 
     "cm_val2": "9", 
     "cm_val3": "15", 
     "mc": "Agen", 
     "tipe": "ESL500ML" 
    }, 
    { 
     "act_qty1": "156", 
     "act_val1": "3", 
     "acvqty": "0.00", 
     "acvval": "0.00", 
     "budqty": "0", 
     "budval": "0", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "33.0", 
     "cm_per2": "33.2", 
     "cm_per3": "33.3", 
     "cm_val1": "1", 
     "cm_val2": "2", 
     "cm_val3": "4", 
     "mc": "Hotel & Restaurant", 
     "tipe": "ESL500ML" 
    }, 
    { 
     "act_qty1": "90", 
     "act_val1": "2", 
     "acvqty": "20.11", 
     "acvval": "21.33", 
     "budqty": "448", 
     "budval": "8", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "39.4", 
     "cm_per2": "32.8", 
     "cm_per3": "37.8", 
     "cm_val1": "1", 
     "cm_val2": "1", 
     "cm_val3": "2", 
     "mc": "Lower Trade", 
     "tipe": "ESL500ML" 
    }, 
    { 
     "act_qty1": "3535", 
     "act_val1": "68", 
     "acvqty": "20.57", 
     "acvval": "20.63", 
     "budqty": "17189", 
     "budval": "331", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "39.7", 
     "cm_per2": "40.8", 
     "cm_per3": "40.3", 
     "cm_val1": "27", 
     "cm_val2": "140", 
     "cm_val3": "166", 
     "mc": "Modern Market", 
     "tipe": "ESL500ML" 
    }, 
    { 
     "act_qty1": "2700", 
     "act_val1": "29", 
     "acvqty": "2.84", 
     "acvval": "3.27", 
     "budqty": "95040", 
     "budval": "899", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "9.5", 
     "cm_per2": "11.1", 
     "cm_per3": "12.9", 
     "cm_val1": "3", 
     "cm_val2": "76", 
     "cm_val3": "74", 
     "mc": "Agen", 
     "tipe": "UHT" 
    }, 
    { 
     "act_qty1": "3216", 
     "act_val1": "35", 
     "acvqty": "18.93", 
     "acvval": "19.03", 
     "budqty": "16993", 
     "budval": "184", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "10.8", 
     "cm_per2": "7.6", 
     "cm_per3": "6.6", 
     "cm_val1": "4", 
     "cm_val2": "9", 
     "cm_val3": "9", 
     "mc": "Hotel & Restaurant", 
     "tipe": "UHT" 
    }, 
    { 
     "act_qty1": "10701", 
     "act_val1": "105", 
     "acvqty": "23.85", 
     "acvval": "24.15", 
     "budqty": "44872", 
     "budval": "434", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "1.4", 
     "cm_per2": "-0.6", 
     "cm_per3": "-0.5", 
     "cm_val1": "1", 
     "cm_val2": "-3", 
     "cm_val3": "-2", 
     "mc": "Institution", 
     "tipe": "UHT" 
    }, 
    { 
     "act_qty1": "5663", 
     "act_val1": "65", 
     "acvqty": "18.58", 
     "acvval": "19.33", 
     "budqty": "30487", 
     "budval": "334", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "12.7", 
     "cm_per2": "12.0", 
     "cm_per3": "11.2", 
     "cm_val1": "8", 
     "cm_val2": "36", 
     "cm_val3": "40", 
     "mc": "Lower Trade", 
     "tipe": "UHT" 
    }, 
    { 
     "act_qty1": "16637", 
     "act_val1": "197", 
     "acvqty": "18.60", 
     "acvval": "18.38", 
     "budqty": "89424", 
     "budval": "1072", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "9.3", 
     "cm_per2": "7.4", 
     "cm_per3": "11.8", 
     "cm_val1": "18", 
     "cm_val2": "68", 
     "cm_val3": "133", 
     "mc": "Modern Market", 
     "tipe": "UHT" 
    }, 
    { 
     "act_qty1": "84", 
     "act_val1": "3", 
     "acvqty": "2.10", 
     "acvval": "2.10", 
     "budqty": "4008", 
     "budval": "132", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "50.9", 
     "cm_per2": "52.9", 
     "cm_per3": "51.0", 
     "cm_val1": "1", 
     "cm_val2": "3", 
     "cm_val3": "110", 
     "mc": "Agen", 
     "tipe": "WHP" 
    }, 
    { 
     "act_qty1": "948", 
     "act_val1": "30", 
     "acvqty": "26.33", 
     "acvval": "27.82", 
     "budqty": "3600", 
     "budval": "108", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "48.9", 
     "cm_per2": "50.5", 
     "cm_per3": "41.2", 
     "cm_val1": "15", 
     "cm_val2": "63", 
     "cm_val3": "76", 
     "mc": "Hotel & Restaurant", 
     "tipe": "WHP" 
    }, 
    { 
     "act_qty1": "2604", 
     "act_val1": "71", 
     "acvqty": "9.18", 
     "acvval": "9.28", 
     "budqty": "28360", 
     "budval": "769", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "43.3", 
     "cm_per2": "42.9", 
     "cm_per3": "39.3", 
     "cm_val1": "31", 
     "cm_val2": "233", 
     "cm_val3": "358", 
     "mc": "Institution", 
     "tipe": "WHP" 
    }, 
    { 
     "act_qty1": "6", 
     "act_val1": "0", 
     "acvqty": "3.33", 
     "acvval": "4.26", 
     "budqty": "180", 
     "budval": "6", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "60.4", 
     "cm_per2": "0.0", 
     "cm_per3": "0.0", 
     "cm_val1": "0", 
     "cm_val2": "0", 
     "cm_val3": "0", 
     "mc": "Lower Trade", 
     "tipe": "WHP" 
    }, 
    { 
     "act_qty1": "266", 
     "act_val1": "11", 
     "acvqty": "50.38", 
     "acvval": "50.51", 
     "budqty": "528", 
     "budval": "21", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "48.6", 
     "cm_per2": "48.8", 
     "cm_per3": "49.2", 
     "cm_val1": "5", 
     "cm_val2": "14", 
     "cm_val3": "17", 
     "mc": "Modern Market", 
     "tipe": "WHP" 
    }, 
    { 
     "act_qty1": "0", 
     "act_val1": "0", 
     "acvqty": "0.00", 
     "acvval": "0.00", 
     "budqty": "0", 
     "budval": "0", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "0.0", 
     "cm_per2": "5.1", 
     "cm_per3": "5.5", 
     "cm_val1": "0", 
     "cm_val2": "9", 
     "cm_val3": "6", 
     "mc": "Agen", 
     "tipe": "CHEESE1K" 
    }, 
    { 
     "act_qty1": "127", 
     "act_val1": "8", 
     "acvqty": "0.98", 
     "acvval": "0.98", 
     "budqty": "13000", 
     "budval": "845", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "21.2", 
     "cm_per2": "21.7", 
     "cm_per3": "22.8", 
     "cm_val1": "2", 
     "cm_val2": "33", 
     "cm_val3": "40", 
     "mc": "Hotel & Restaurant", 
     "tipe": "CHEESE1K" 
    }, 
    { 
     "act_qty1": "0", 
     "act_val1": "0", 
     "acvqty": "0.00", 
     "acvval": "0.00", 
     "budqty": "0", 
     "budval": "0", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "0.0", 
     "cm_per2": "19.8", 
     "cm_per3": "0.0", 
     "cm_val1": "0", 
     "cm_val2": "0", 
     "cm_val3": "0", 
     "mc": "Lower Trade", 
     "tipe": "CHEESE1K" 
    }, 
    { 
     "act_qty1": "0", 
     "act_val1": "0", 
     "acvqty": "0.00", 
     "acvval": "0.00", 
     "budqty": "0", 
     "budval": "0", 
     "bulan1": "7 ", 
     "bulan2": "6 ", 
     "bulan3": "5 ", 
     "cm_per1": "0.0", 
     "cm_per2": "19.0", 
     "cm_per3": "0.0", 
     "cm_val1": "0", 
     "cm_val2": "0", 
     "cm_val3": "0", 
     "mc": "Modern Market", 
     "tipe": "CHEESE1K" 
    } 
    ] 
} 

還有一件事，在我的可摺疊列表中，有一張桌子，我想爲行背景創建「斑馬條」，該怎麼做？

感謝

Answer 1

你要遍歷所有的數據進行兩次：

var data = [ 
    // Data simplified and shortened for brevity 
    {"type": "ESL", "val1": 17, "val2" 9.5}, 
    {"type": "ESL", "val1": 17, "val2" 9.5}, 
    {"type": "UHT", "val1": 17, "val2" 9.5}, 
    {"type": "ESL", "val1": 17, "val2" 9.5} 
]; 

var final_results = {}, 
    type, 
    current_row; 
for (var i=0, l=data.length; i<l; i++) { 
    current_row = data[i]; 
    type = current_row.type; 
    // If we haven't seen this type before 
    if (!final_results[type]) { 
     // Add a results object designed to store multiple values of each key 
     final_results[type] = { 
      "val1": [], 
      "val2": [] 
     }; 
    } 
    // Then we can add the current data safely either way 
    // This could be pushed into a function for reusability and clarity 
    final_results[type].val1.push(current_row.val1); 
    final_results[type].val2.push(current_row.val2); 
    // More here as needed 
} 
// Now we can loop over the data in final_results 
for (var entry in final_results) { 
    if (Object.prototype.hasOwnProperty.call(final_results, entry)) { 
     // Write out values to HTML here - better yet, use a templating engine 
    } 
}