Gagantous Gagantous - 26 days ago 8
JSON Question

Rowspan if the some td contain same id using jquery json data

I have table like this


===============
|1 | 1| 1|
| |===|
| | 2|
| |===|
| | 3|
=========
| 2| 1|
| |===|
| | 2|
| |===|
| | 3|
===============
|2 | 1| 1|
| |===|
| | 2|
| |===|
| | 3|
=========
| 2| 1|
| |===|
| | 2|
| |===|
| | 3|
==============


how can i make table like this based on database data that will rowspan if the data have same id, using jquery json data ?

EDIT!

this is my ajax function

$.ajax({
method:'POST',
async:true,
url:"<?php echo base_url()?>dashboard/showTableKondisi",
datatype:'json',
success:function(data){

var json = $.parseJSON(data);

var html = '';
var i;


if(Object.keys(json.data).length > 0){
for(i=0,no=1,no2=1;i<Object.keys(json.data).length;i++){

var length_data_sebab_new = 0

for(var x=0; x<Object.keys(json.data[i].data_sebab).length; x++){
for(var y=0; y<Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length; y++){
length_data_sebab_new = Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length;
}
}
var length_data_sebab_new_new = length_data_sebab_new;
var length_data_sebab = (Object.keys(json.data[i].data_sebab).length)-(-1)-(-length_data_sebab_new_new) ;



html+='<tr><td rowspan="'+length_data_sebab+'">'+no+'</td><td rowspan="'+length_data_sebab+'"><button class="btn btn-default" type="button" onClick="javascript:tambahsebab(this.id)" id="'+json.data[i].id+'"><i class="fa fa-plus"></i> Penyebab</button><button class="btn btn-default pull-left" type="button" id="edit_kondisi"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].memo_kondisi+'<br>Rp '+json.data[i].nilai_temuan+'</td>';


for(var x=0; x<Object.keys(json.data[i].data_sebab).length; x++){
var length_data_rekomendasi = (Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length)-(-1);
// console.log(Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length);
no2 = x-(-1);
html+='<tr><td rowspan="'+length_data_rekomendasi+'" >'+no2+'</td><td rowspan="'+length_data_rekomendasi+'"><button class="btn btn-default" type="button" onClick="javascript:tambahrekomendasi(this.id)" id="'+json.data[i].data_sebab[x].id+'"><i class="fa fa-plus"></i> Rekomendasi</button><button class="btn btn-default pull-left" type="button" id="edit_sebab"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].data_sebab[x].id+'<br>Rp '+json.data[i].data_sebab[x].nilai_temuan+'</td>';

for(var y=0; y<Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length; y++){
no3 = y-(-1);
html+='<tr><td>'+no3+'</td><td><button class="btn btn-default" type="button" onClick="javascript:tambahrekomendasi(this.id)" id="'+json.data[i].data_sebab[x].data_rekomendasi[y].id+'"><i class="fa fa-plus"></i> Tindak Lanjut</button><button class="btn btn-default pull-left" type="button" id="edit_sebab"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].data_sebab[x].data_rekomendasi[y].id+'<br>Rp aaa'+json.data[i].data_sebab[x].data_rekomendasi[y].nilai_temuan+'</td></tr>';
//

}
html+='</tr>';

}
html+='</tr>';

no+=1;
no2+=1;
no
}
}else{
html+='';
}
$('#kondisi_tabel').html(html);
// $('#s_sub_kondisi').html(html2);
},
error:function(){
alert('tidak dapat membaca database')

}
})


EDIT 3

my progress so far is just like this . i have made the table work perfectly but when the second td of the same tr row, td have another td on right them, it got crashed

Before

After

MY NEW JSON DATA

Update july 24, 2017

{
"data": [
{
"id": "14",
"memo_kondisi": "Kekurangan pekerjaan",
"total_row": "5",
"nilai_temuan": "1.000.000",
"data_sebab": [
{
"id": "15",
"id_sebab": "",
"id_sub_sebab": "",
"memo_sebab": "coba",
"data_rekomendasi": [
{
"id": "25",
"id_rekomendasi": "10",
"id_sub_rekomendasi": "",
"id_s_sub_rekomendasi": "",
"nilai_rekomendasi": "0"
},
{
"id": "26",
"id_rekomendasi": "10",
"id_sub_rekomendasi": "",
"id_s_sub_rekomendasi": "",
"nilai_rekomendasi": "0"
},
{
"id": "31",
"id_rekomendasi": "10",
"id_sub_rekomendasi": "",
"id_s_sub_rekomendasi": "",
"nilai_rekomendasi": "0"
}
]
},
{
"id": "16",
"id_sebab": "",
"id_sub_sebab": "",
"memo_sebab": "coba",
"data_rekomendasi": [
{
"id": "34",
"id_rekomendasi": "10",
"id_sub_rekomendasi": "",
"id_s_sub_rekomendasi": "",
"nilai_rekomendasi": "0"
},
{
"id": "35",
"id_rekomendasi": "10",
"id_sub_rekomendasi": "",
"id_s_sub_rekomendasi": "",
"nilai_rekomendasi": "0"
}
]
}
]
},
{
"id": "15",
"memo_kondisi": "Kekurangan pekerjaan",
"total_row": "2",
"nilai_temuan": "1.000.000",
"data_sebab": [
{
"id": "5",
"id_sebab": "",
"id_sub_sebab": "",
"memo_sebab": "coba",
"data_rekomendasi": []
},
{
"id": "10",
"id_sebab": "",
"id_sub_sebab": "",
"memo_sebab": "coba",
"data_rekomendasi": []
}
]
},
{
"id": "16",
"memo_kondisi": "",
"total_row": "2",
"nilai_temuan": "0",
"data_sebab": [
{
"id": "9",
"id_sebab": "",
"id_sub_sebab": "",
"memo_sebab": "coba",
"data_rekomendasi": []
},
{
"id": "12",
"id_sebab": "",
"id_sub_sebab": "",
"memo_sebab": "coba",
"data_rekomendasi": []
}
]
}
]
}

Answer Source

I finally get the solution.

i will write down my syntax and table below for other audience if this answer helpful

I have three table one table with another had relationships

Old code

$.ajax({
  method:'POST',
  async:true,
  url:"<?php echo base_url()?>dashboard/showTableKondisi",
  datatype:'json',
 success:function(data){

    var json = $.parseJSON(data);

    var html = '';
    var i;


  if(Object.keys(json.data).length > 0){
    for(i=0,no=1,no2=1;i<Object.keys(json.data).length;i++){

       var length_data_sebab_new = 0

      for(var x=0; x<Object.keys(json.data[i].data_sebab).length; x++){
        for(var y=0; y<Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length; y++){
          length_data_sebab_new = Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length;
        }
       }
         var length_data_sebab_new_new = length_data_sebab_new;
      var length_data_sebab = (Object.keys(json.data[i].data_sebab).length)-(-1)-(-length_data_sebab_new_new) ;



      html+='<tr><td rowspan="'+length_data_sebab+'">'+no+'</td><td rowspan="'+length_data_sebab+'"><button class="btn btn-default" type="button"  onClick="javascript:tambahsebab(this.id)" id="'+json.data[i].id+'"><i class="fa fa-plus"></i> Penyebab</button><button class="btn btn-default pull-left" type="button" id="edit_kondisi"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].memo_kondisi+'<br>Rp '+json.data[i].nilai_temuan+'</td>';


      for(var x=0; x<Object.keys(json.data[i].data_sebab).length; x++){
        var length_data_rekomendasi = (Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length)-(-1);
        // console.log(Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length);
        no2 = x-(-1);
        html+='<tr><td rowspan="'+length_data_rekomendasi+'" >'+no2+'</td><td rowspan="'+length_data_rekomendasi+'"><button class="btn btn-default" type="button"  onClick="javascript:tambahrekomendasi(this.id)" id="'+json.data[i].data_sebab[x].id+'"><i class="fa fa-plus"></i> Rekomendasi</button><button class="btn btn-default pull-left" type="button" id="edit_sebab"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].data_sebab[x].id+'<br>Rp '+json.data[i].data_sebab[x].nilai_temuan+'</td>';

         for(var y=0; y<Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length; y++){
        no3 = y-(-1);
        html+='<tr><td>'+no3+'</td><td><button class="btn btn-default" type="button"  onClick="javascript:tambahrekomendasi(this.id)" id="'+json.data[i].data_sebab[x].data_rekomendasi[y].id+'"><i class="fa fa-plus"></i> Tindak Lanjut</button><button class="btn btn-default pull-left" type="button" id="edit_sebab"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].data_sebab[x].data_rekomendasi[y].id+'<br>Rp aaa'+json.data[i].data_sebab[x].data_rekomendasi[y].nilai_temuan+'</td></tr>';
        // 

         }
         html+='</tr>';

      }
      html+='</tr>';

      no+=1;
      no2+=1;
      no
    }
  }else{
    html+='';
  }
    $('#kondisi_tabel').html(html);
    // $('#s_sub_kondisi').html(html2);
  },
  error:function(){
    alert('tidak dapat membaca database')

  } 
})

New Code

$.ajax({
      method:'POST',
      async:true,
      url:"<?php echo base_url()?>dashboard/showTableKondisi",
      datatype:'json',
     success:function(data){    
        var json = $.parseJSON(data);
        // var html that will contain tr and table that will add to te table based on id #kondisi_tabel ( i used bootstrap table with id)
        var html = '';
        var i;
      if(Object.keys(json.data).length > 0){
        for(i=0,no=1,no2=1;i<Object.keys(json.data).length;i++){
           var length_data_sebab_new = 0
          html+='<tr><td rowspan="'+json.data[i].total_row+'">'+no+'</td><td rowspan="'+json.data[i].total_row+'"><button class="btn btn-default" type="button"  onClick="javascript:tambahsebab(this.id)" id="'+json.data[i].id+'"><i class="fa fa-plus"></i> Penyebab</button><button class="btn btn-default pull-left" type="button" id="edit_kondisi"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].memo_kondisi+'<br>Rp '+json.data[i].nilai_temuan+'</td>';            
          for(var x=0; x<Object.keys(json.data[i].data_sebab).length; x++){
            var length_data_rekomendasi = (Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length);
            // console.log(Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length);
              if(x == 1 ){
              var tr = '<tr>';
            }else{
              var tr = '';
            }
            html += tr;
            no2 = x-(-1);
            html+='<td rowspan="'+length_data_rekomendasi+'" >'+no2+'</td><td rowspan="'+length_data_rekomendasi+'"><button class="btn btn-default" type="button"  onClick="javascript:tambahrekomendasi(this.id)" id="'+json.data[i].data_sebab[x].id+'"><i class="fa fa-plus"></i> Rekomendasi</button><button class="btn btn-default pull-left" type="button" id="edit_sebab"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].data_sebab[x].id+'<br>Rp '+json.data[i].data_sebab[x].nilai_temuan+'</td>';
             if ( Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length == '' ){ var tr = '</tr>'; }else{  var tr = ''; }
            html+= tr;
             for(var y=0; y<Object.keys(json.data[i].data_sebab[x].data_rekomendasi).length; y++){
            no3 = y-(-1);
            html+='<td>'+no3+'</td><td><button class="btn btn-default" type="button"  onClick="javascript:tambahrekomendasi(this.id)" id="'+json.data[i].data_sebab[x].data_rekomendasi[y].id+'"><i class="fa fa-plus"></i> Tindak Lanjut</button><button class="btn btn-default pull-left" type="button" id="edit_sebab"><i class="fa fa-pencil"></i> Edit</button><br><br>'+json.data[i].data_sebab[x].data_rekomendasi[y].id+'<br>Rp aaa'+json.data[i].data_sebab[x].data_rekomendasi[y].nilai_temuan+'</td></tr>';
             }         
          }
          html+='</tr>';
          no+=1;
          no2+=1;
          no
        }
      }else{
        html+='';
      }
        // this is and id table that will 
        $('#kondisi_tabel').html(html);
        },
      error:function(){
        alert('function not found')

      } 
    })

BEFORE

Before

AFTER

After

i know that this is not the best solution, but it's work for me, so if someone had a better solution, really apreciate it if you could share the solution thanks :)

for my ajax call reponse ( json text ), please check my question again, i have updated it