Dynamic & Complex rowspan in HTML table from json array

Question

I wanted to achieve similar result as shown in below image.

Expected result:

Question: Looking for Jquery or javascript solution to create dynamic table along with Rowspan. I am facing issue to get the parent row and add the rowspan.

Your help is much appreciated.

Here is my JSON format and what I am trying to achieve:

var data={"result": [
    {
      "RMP_MASTER_WILAYAH_ID": "20190402080337958516",
      "RMP_MASTER_WILAYAH_KODE": "02",
      "RMP_MASTER_WILAYAH_detail": [
        {
          "RMP_MASTER_WILAYAH_ID": "20190402080403561417",
          "RMP_MASTER_WILAYAH": "KUALA ENOK",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190329144213331884",
              "RMP_MASTER_PERSONAL_NAMA": "YANTO KHO",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20190329144712243937",
              "RMP_MASTER_PERSONAL_NAMA": "USMAN",
            }
          ]
        },
        {
          "RMP_MASTER_WILAYAH_ID": "20190402080355461744",
          "RMP_MASTER_WILAYAH": "ENOK",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190329150712446114",
              "RMP_MASTER_PERSONAL_NAMA": "NURDIN",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20190329151404711228",
              "RMP_MASTER_PERSONAL_NAMA": "H. HARUNA RASYID",
            }
          ]
        },
        {
          "RMP_MASTER_WILAYAH_ID": "20190402080411413459",
          "RMP_MASTER_WILAYAH": "PARIT PINANG",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190329153052471217",
              "RMP_MASTER_PERSONAL_NAMA": "SUWANDI",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20190329153610274231",
              "RMP_MASTER_PERSONAL_NAMA": "BEDDU",
            }
          ]
        }
      ]
    },
    {
      "RMP_MASTER_WILAYAH_ID": "20190402080607764729",
      "RMP_MASTER_WILAYAH_KODE": "03",
      "RMP_MASTER_WILAYAH_detail": [
        {
          "RMP_MASTER_WILAYAH_ID": "20190402132520833736",
          "RMP_MASTER_WILAYAH": "PULAU KIJANG",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190402132304152471",
              "RMP_MASTER_PERSONAL_NAMA": "H. BAHARUDIN",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20190402132622621585",
              "RMP_MASTER_PERSONAL_NAMA": "HM. NUR HDP",
            }
          ]
        },
        {
          "RMP_MASTER_WILAYAH_ID": "20190402140031812644",
          "RMP_MASTER_WILAYAH": "BENTENG",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190402135920441438",
              "RMP_MASTER_PERSONAL_NAMA": "SURGAWI",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20200325091038411761",
              "RMP_MASTER_PERSONAL_NAMA": "M. TANG",
            }
          ]
        },
        {
          "RMP_MASTER_WILAYAH_ID": "20190402140141611248",
          "RMP_MASTER_WILAYAH": "KOTA BARU",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190402140121737955",
              "RMP_MASTER_PERSONAL_NAMA": "H. RAMLI",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20190402140908815557",
              "RMP_MASTER_PERSONAL_NAMA": "H. SYAMSUDDIN",
            }
          ]
        }
      ]
    }
  ]
};
function createRowHTML(){
          var record='';	
					var record1Nya='';	
					var record_detailNya='';
					
					var record1=[];	
					var record_detail=[];
					
					var record1_relasi=[];	
					var record_relasi_detail=[];	
					
					var jlhRowRelasi=[];
					var jlhRowDetailWilayah=0;
					var jlhRowSpan=0;
          
					for(i=0;i<data.result.length;i++)
					{
						var jlhRowDetailWilayah=data.result[i].RMP_MASTER_WILAYAH_detail.length;
						for(iDetail=0;iDetail<data.result[i].RMP_MASTER_WILAYAH_detail.length;iDetail++)
						{
							jlhRowRelasi[i]=data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH_relasi.length;
							for(iRelasi=0;iRelasi<data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH_relasi.length;iRelasi++)
							{
								if(iRelasi==0)
								{
									record1_relasi[i] = record1_relasi[i]+"<td>"+
																			data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH_relasi[iRelasi].RMP_MASTER_PERSONAL_NAMA+
																	"</td>";
								}else
								{
									record_relasi_detail[i] = record_relasi_detail[i]+"<tr>"+
												"<td>"+
													data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH_relasi[iRelasi].RMP_MASTER_PERSONAL_NAMA+
												"</td>"+
											"</tr>";
								}
							}
							
							
							if(iDetail==0)
							{
								record1[i] = record1[i]+"<td rowspan='"+jlhRowRelasi[i]+"'>"+
													data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH+
											"</td>"+record1_relasi[i];
							}else
							{
								record_detail[i] = record_detail[i]+"<tr>"+
											"<td rowspan='"+jlhRowRelasi[i]+"'>"+
												data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH+
											"</td>"+
										"</tr>"+record_relasi_detail[i];
							}
						}
							
						record1Nya=record1[i];
						record_detailNya=record_detail[i];
						
				
						jlhRowSpan=parseInt(jlhRowDetailWilayah)+parseInt(jlhRowRelasi);
						record = record+"<tr>"+
											"<td rowspan='"+jlhRowSpan+"'>"+
												data.result[i].RMP_MASTER_WILAYAH_KODE+
											"</td>"+
											record1Nya+
										"</tr>"+record_detailNya;					
					}
					
					
					$("tbody#zone_data").html(record);
}
$(function(){
	createRowHTML();
});

<table>
				<tr>
					<td>Wil</td>
					<td>Lokasi</td>
					<td>Relasi</td>
         </tr>
				<tbody id="zone_data">
				</tbody>
			</table>

This is the result

Nimantha · Accepted Answer · 2021-10-31 10:34:27Z

1

I've tried solving your problem. Below are the changes in createRowHTML function.

function createRowHTML() {
    var tableContent = "";
    for (var result = 0; result < data.result.length; result++) {
        // calculate rowspan for first cell
        var rowspan = 0;
        var detailLength = data.result[result].RMP_MASTER_WILAYAH_detail.length;
        rowspan += detailLength;
        for (var i = 0; i < detailLength; i++) {
            rowspan += data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi.length;
        }

        // create rows
        tableContent += "<tr><td rowspan=" + parseInt(1 + rowspan) + ">" + data.result[result].RMP_MASTER_WILAYAH_KODE + "</td></tr>";
        var relasiLength = 0;
        for (var i = 0; i < detailLength; i++) {
            relasiLength = data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi.length;
            tableContent += "<tr><td rowspan=" + parseInt(1 + relasiLength) + ">"
                + data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH + "</td></tr>";
            for (var j = 0; j < relasiLength; j++) {
                tableContent += "<tr><td>" + data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi[j].RMP_MASTER_PERSONAL_NAMA + "</td></tr>";
            }
        }
    }
    $("tbody#zone_data").append(tableContent);
}
$(function () {
    createRowHTML();
});

Working example: http://jsfiddle.net/w8r2a9vs/

edited Oct 31, 2021 at 10:34

Nimantha

6,5476 gold badges32 silver badges78 bronze badges

answered Jun 18, 2020 at 14:41

Amrita

263 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Asyah Sinaga Over a year ago

Thank you very much for your help @Amrita, this is very useful and cool.

Asyah Sinaga Over a year ago

With the same JSON format that I have written in the variable "data", please help once again if I want the following results: i.sstatic.net/aRLrr.png

Amrita Over a year ago

I have done the changes in the fiddle example, here is the new link: jsfiddle.net/eh29kgmL I hope that is what you need.

Asyah Sinaga Over a year ago

You are so great..! With your help, I have found what I need. thanks.

Asyah Sinaga Over a year ago

Hello @Amrita , Sorry, I have trouble tagging you or asking questions directly from the chat, so I asked here. Please provide a solution to my posts that are on stackoverflow.com/q/63947998/3739963

Vencendor · Accepted Answer · 2020-06-18 08:43:35Z

0

You can use logic of binary tree. For you problem can trace all nodes without children, on top parent, adding +1 to rowspan to any parent

in your example node without childrens

        {
          "RMP_MASTER_PERSONAL_ID": "20200325091038411761",
          "RMP_MASTER_PERSONAL_NAMA": "M. TANG",
        }

first parent receive 2 rowspan "points", next parent have summ of rowspans of his children

Algoritm:

1 traversal all nodes,

2 if finded node without childres travers all his parents and add +1 to "rowspan"

answered Jun 18, 2020 at 8:43

Vencendor

1421 silver badge4 bronze badges

1 Comment

Asyah Sinaga Over a year ago

Thank you for the explanation, but I still can't make it. Can you give an example of the javascript source code with the my JSON format that I have written in the variable "data"?

Collectives™ on Stack Overflow

Dynamic & Complex rowspan in HTML table from json array

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related