Print json object to nested html table

Question

I have a JSON object in array variable that has parent categories and child categories data. I want to place child categories to parent categories as a nested table.

For example this:

const jsonData = [{
  category_id: '010103',
  level1: 'electronics',
  level2: 'TV',
  level3: 'samsung',
}, {
  category_id: '010104',
  level1: 'electronics',
  level2: 'TV',
  level3: 'philips',
}, {
  category_id: '010101',
  level1: 'households',
  level2: 'kitchen',
  level3: 'table',
}];

I want to place them to the table like this:

here is what I tried:

for (let i = 0; i < list.length; i++) {
  const row = list[i];
  console.log(row);
  let evenClass = 'even';
  if ((i + 1) % 2 == 0) {
    evenClass = 'odd';
  }

  const low = list[i - 1];
  if (row[i] != 0 || 'level1' in low) {
    if (row.level1 == low.level1) {
      const append = `${'<tr> '
        + ' <td>'}${row.level2}</td>`
        + ` <td>${row.level3}</td>`
        + ` <td>${row.meta_count}</td>`
        + ` <td>${moment(row.reg_date).format('YYYY-MM-DD HH:mm:ss')}</td>`
        + ` <td>${row.category_id}</td>`
        + '  </tr>';
      $('#tbody').append(append);
    } else {
      const append = `${'<tr> '
        + ' <td>'}${row.level1}</td>`
        + ` <td>${row.level2}</td>`
        + ` <td>${row.level3}</td>`
        + ` <td>${row.meta_count}</td>`
        + ` <td>${moment(row.reg_date).format('YYYY-MM-DD HH:mm:ss')}</td>`
        + ` <td>${row.category_id}</td>`
        + '  </tr>';
      $('#tbody').append(append);
    }
  } else {
    const appendTr = `${'<tr> '
      + '   <td>'}${row.level1}</td>`
      + `   <td>${row.level2}</td>`
      + `   <td>${row.level3}</td>`
      + `   <td>${row.meta_count}</td>`
      + `   <td>${moment(row.reg_date).format('YYYY-MM-DD HH:mm:ss')}</td>`
      + `   <td>${row.category_id}</td>`
      + '  </tr>';
    $('#tbody').append(appendTr);
  }
}

how can I achieve this (skipping the same name levels)?

check your jsonData, your jsonData is wrong

linthertoss
– linthertoss

2020-01-14 04:32:27 +00:00
Commented Jan 14, 2020 at 4:32 — linthertoss
– linthertoss, Commented Jan 14, 2020 at 4:32
edited jsonData

Aziz Sirojiddinov
– Aziz Sirojiddinov

2020-01-14 04:35:02 +00:00
Commented Jan 14, 2020 at 4:35 — Aziz Sirojiddinov
– Aziz Sirojiddinov, Commented Jan 14, 2020 at 4:35

Prasad Wargad · Accepted Answer · 2020-01-14 05:47:44Z

3

Look at the JS Fiddle: https://jsfiddle.net/d2fL3rhp/

First we have retrieved unique level1, level2 & level3 details, then after used $.each loop for preparing required HTML body.

JS Code:

let list = [
                {category_id: "010103", level1: "electronics", level2: "TV", level3: "samsung"},
                {category_id: "010104", level1: "electronics", level2: "TV", level3: "philips"},
                {category_id: "010101", level1: "households", level2: "kitchen", level3: "table"},
                {category_id: "0101021", level1: "households", level2: "kitchen", level3: "table"},
                {category_id: "0101022", level1: "households", level2: "kitchen", level3: "table"},
                {category_id: "0101023", level1: "households", level2: "kitchen", level3: "table"},
                {category_id: "0101031", level1: "grocery", level2: "abc", level3: "xyz"},
                {category_id: "0101032", level1: "grocery", level2: "abc", level3: "pqr"},
                {category_id: "0101033", level1: "grocery", level2: "def", level3: "xyz"},
            ];
let uniqueLevels = {};
if( list != null && list.length > 0 ) {
    $.each(list, function(index, value){
        if(value.level1 != null && (uniqueLevels[value.level1] == null || typeof uniqueLevels[value.level1] == 'undefined')) {
            uniqueLevels[value.level1] = {};
        }
        if( value.level2 != null && (uniqueLevels[value.level1][value.level2] == null || typeof uniqueLevels[value.level1][value.level2] == 'undefined') ) {
            uniqueLevels[value.level1][value.level2] = {};
        }
        if( value.level3 != null ) {
            if(uniqueLevels[value.level1][value.level2][value.level3] == null || typeof uniqueLevels[value.level1][value.level2][value.level3] == 'undefined') {
                uniqueLevels[value.level1][value.level2][value.level3] = 1;
            }
            else {
                uniqueLevels[value.level1][value.level2][value.level3] += 1;
            }
        }
    });
}

var tbodyHTML = '';
$.each(uniqueLevels, function(level1_key, level1_data){
    $.each(level1_data, function(level2_key, level2_data){
        var level2Rows = '', flagAddTR = false, rowspanCount = 0;
        $.each(level2_data, function(level3_key, level3_data){
            rowspanCount += level3_data;
        });

        tbodyHTML += '<tr><td rowspan="'+ rowspanCount +'">'+ level1_key +'</td><td rowspan="'+ rowspanCount +'">'+ level2_key +'</td>';
        $.each(list, function(key, value){
            if( (value['level1'] == level1_key) && (value['level2'] == level2_key) ) {
                if( level2Rows != '' ) {
                    flagAddTR = true;
                }

                if( flagAddTR ) {
                    level2Rows += '<tr>';
                }
                level2Rows += '<td>'+ value['level3'] +'</td><td>'+ value['category_id'] +'</td></tr>';
            }
        });
        tbodyHTML += level2Rows;
    });
});

$('#tbody').html(tbodyHTML);

edited Jan 14, 2020 at 5:47

answered Jan 14, 2020 at 5:34

Prasad Wargad

7652 gold badges7 silver badges11 bronze badges

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

3 Comments

Aziz Sirojiddinov Over a year ago

thanks for the answer. but when I have empty extra level2 for electronics. the program separates for two table row

Aziz Sirojiddinov Over a year ago

i want nest them also for level1

Prasad Wargad Over a year ago

Edit your question & show the required output. Because as per earlier output for each level2 their will be a separate row needs to be present in table body & that's the same thing happening in the given answer.

Collectives™ on Stack Overflow

Print json object to nested html table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related