How to group the json array by specified object value?

Question

I've json right here.
and this is the result in table: enter image description here
and this is my javascript to get the json and parse it into table:

function detail(kodenegara, koderesult)
        {
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: "http://www.greenfields.co.id:502/Service1.svc/"+kodenegara,
                dataType: "json",
                success:function(data){
                    var result = koderesult;
                    
                    var details = "";
                    
                    for (i = 0; i < data[result].length; i++){
                        details += 
                          "<tr>"+
                            "<td>"+data[result][i].mc+"</td>"+
                            "<td>"+data[result][i].value3+"</td>"+
                            "<td>"+data[result][i].value2+"</td>"+
                            "<td>"+data[result][i].value1+"</td>"+
                            "<td>"+data[result][i].avgqty+"</td>"+
                            "<td>"+data[result][i].budqty+"</td>"+
                            "<td>"+data[result][i].budval+"</td>"+
                            "<td>"+data[result][i].acvqty+"</td>"+
                            "<td>"+data[result][i].acvval+"</td>"+
                          "</tr>";
                    }
                    $("#table_" + kodenegara)
                    .empty()
                    .append(details)
                    .trigger('create');
                    //show the page
                    $.mobile.changePage("#detail_"+kodenegara, "slide", false, true);
                },
                error: function () { 
                    alert("ERROR"); 
                }
            });
        }

I want to group the json array by the object name tipe. so the table will be grouped by the tipe and will be like this:
enter image description here

The question is what should I do with my looping in javascript? Thank you

score 1 · Accepted Answer · 2012-07-11 07:49:59Z

Create 5 tables with 5 id each equal to your one of tipe.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery.js"></script>

    <script type="text/javascript">
function detail(kodenegara, koderesult)
        {
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: "http://www.greenfields.co.id:502/Service1.svc/"+kodenegara,
                dataType: "json",
                success:function(data){
                    var result = koderesult;

                    var details = "";

                    for (i = 0; i < data[result].length; i++){
                        $("#"+data[result][i].tipe).append("<tr>"+
                            "<td>"+data[result][i].mc+"</td>"+
                            "<td>"+data[result][i].value3+"</td>"+
                            "<td>"+data[result][i].value2+"</td>"+
                            "<td>"+data[result][i].value1+"</td>"+
                            "<td>"+data[result][i].avgqty+"</td>"+
                            "<td>"+data[result][i].budqty+"</td>"+
                            "<td>"+data[result][i].budval+"</td>"+
                            "<td>"+data[result][i].acvqty+"</td>"+
                            "<td>"+data[result][i].acvval+"</td>"+
                          "</tr>");
                    }
                    $("#table_" + kodenegara)
                    .empty()
                    .append(details)
                    .trigger('create');
                    //show the page
                    $.mobile.changePage("#detail_"+kodenegara, "slide", false, true);
                },
                error: function () { 
                    alert("ERROR"); 
                }
            });
        }

</script>

<style></style><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table id="ESL" border="1"></table>
<table id="ESL500ML" border="1"></table>
<table id="UHT" border="1"></table>
<table id="WHP" border="1"></table>
<table id="CHEESEIK" border="1"></table>
</body>
</html>

now it works :)) but what if the number of table is dynamic and to get the number of tables is by grouping the tipe? because there is the result that not contain 5 tipe (can be 3 or 4). :)) thank you very much :D

Collectives™ on Stack Overflow

How to group the json array by specified object value?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related