Question

I want to create collapsible list (jquery mobile) by looping from javascript. From that looping I want the collapsible list get the contents from json objects. The object prop that I use for looping is tipe, but somehow it create a collapsible list by all tipe and what I want is not all tipe
(e.g. the tipe from json are “ESL”,”ESL,”ESL”,”UHT”,”UHT”,”WHP”,”WHP”,”WHP”,”WHP” , and I want to create collapsible list like “ESL”,”UHT”,”WHP”)

here is what I’ve done so far >> 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');
    });

here is the array:

"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"
    }
  ]
}

and one more thing, in my collapsible list, there is a table and I want to create “zebra strip” for row backgound, how to do that?

Thanks

Answer 1

You’ll want to loop over the data twice:

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