javascript - JSON nested object to HTML Nested Table -

i'm having trouble getting nest correct way. needs nest object nested. td key, , new td / table objects or if values, shows table name / value.

any direction help.

the json string this:

{ "accounts": {     "demo": {         "name": "your medical clinic",         "groupid": "demo",         "callerid": "8664738160",         "callerid_err": "ok",         "transferphone": "1-931-555-1212",         "transferphone_err": "invalid length",         "timezone": "est",         "emrsoftware": "greenway",         "merlin": 1,         "prm": 1,         "calldaysout": 2,         "emaildaysout": 5,         "enablevoice": 1,         "enabletext": 1,         "enablemail": 1,         "exclude": "12 months,12-17 years,18+ years,2 months,",         "emailbtnconfirm": 1,         "emailbtnreschedule": 1,         "emailbtncancel": 1,         "enablenoshow": 1,         "enablecollection": 0,         "enablerecall": 1,         "enableapptalert": 1,         "appendcallerid": "confirm,cancel,resched,ansmach",         "emailreport": "kevin@relatient.net,john@relatient.net,hello@gim.com",         "emailreport_err": "ok",         "surveyreport": "chris@relatient.net",         "surveyreport_err": "ok",         "hmreport": "john@relatient.net,kevin@relatient.net",         "hmreport_err": "ok",         "apptreminders": {             "croncalls": {                 "croncalls_570": {                     "starthour": 18,                     "startqtrhour": 0,                     "starttime_local": "7:00 pm est",                     "endhour": 19,                     "endqtrhour": 0,                     "endtime_local": "8:00 pm est",                     "calldays": "motuwethfr"                 }             },             "cronemail": {                 "cronemail_110": {                     "hour": 18,                     "qtrhour": 99,                     "starttime_local": "invalid est",                     "appttimemath": "",                     "emaildays": "motuwethfr"                 }             },             "cronsms": {                 "cronsms_82": {                     "hour": 7,                     "qtrhour": 0,                     "starttime_local": "8:00 est",                     "daysout": 0,                     "cronargid": 1,                     "cronargid_type": "frombulk",                     "appttimemath": "",                     "workdays": "motuwethfr",                     "sendondays": "tuwethfr",                     "cronsms_err": "ok"                 }             }         },         "healthmaint": {             "cronhmcalls": {                 "cronhmcalls_2": {                     "starthour": 12,                     "startqtrhour": 0,                     "starttime_local": "1:00 pm est",                     "endhour": 16,                     "endqtrhour": 0,                     "endtime_local": "5:00 pm est",                     "activedays": "motuwefrsa"                 }             },             "cronhmemail": {                 "cronhmemail_1": {                     "hour": 3,                     "qtrhour": 3,                     "starttime_local": "4:45 est",                     "activedays": "thfrsa"                 }             },             "cronhmsms": {                 "cronhmsms_1": {                     "hour": 2,                     "qtrhour": 2,                     "starttime_local": "3:30 est",                     "activedays": "sututhsa"                 }             }         },         "mdpay": {             "cronmdpaycalls": {                 "cronmdpaycalls_2": {                     "hour": 15,                     "qtrhour": 3,                     "starttime_local": "4:45 pm est",                     "activedays": "mowefr"                 }             },             "cronmdpayemail": {                 "cronmdpayemail_2": {                     "hour": 13,                     "qtrhour": 1,                     "starttime_local": "2:15 pm est",                     "activedays": "mofr"                 }             },             "cronmdpaysms": {                 "cronmdpaysms_2": {                     "hour": 15,                     "qtrhour": 1,                     "starttime_local": "4:15 pm est",                     "activedays": "su"                 }             }         },         "noshow": {             "cronnoshowcalls": { }         },         "recall": {             "cronrecallcalls": {                 "cronrecallcalls_4": {                     "hour": 11,                     "qtrhour": 0,                     "starttime_local": "12:00 pm est",                     "activedays": "motuwethfr"                 }             }         },         "cronemailreports": {             "cronemailreport_155": {                 "hour": 20,                 "qtrhour": 1,                 "starttime_local": "9:15 pm est",                 "daysout": 4,                 "csv": 1,                 "reportargid": 3,                 "reportargid_type": "calltime",                 "workdays": "sumotuthfrsa",                 "sendondays": "motuwethfr"             }         },         "callcntnotstatus99": 3680,         "crontab": { },         "incomingfiles": {             "file_1": "payments.json",             "file_1_changed": "2015-04-08 10:44",             "file_1_lines": 222,             "file_2": "recall.csv",             "file_2_changed": "2014-04-17 08:58",             "file_2_lines": 0,             "file_3": "elerts.txt",             "file_3_changed": "2014-12-11 14:14",             "file_3_lines": 21,             "file_4": "noshow.csv",             "file_4_changed": "2014-04-17 08:44",             "file_4_lines": 0,             "file_5": "daily.txt",             "file_5_changed": "2014-10-29 12:50",             "file_5_lines": 188,             "file_6": "bulk.csv",             "file_6_changed": "2014-10-20 14:41",             "file_6_lines": 1         }     } } } 

here code i'm using create html table:

// settings :: configuration  var jsontext = '{ "accounts" : { "demo": { "name": "your medical clinic", "groupid": "demo", "callerid": "8664738160", "callerid_err": "ok", "transferphone": "1-931-555-1212", "transferphone_err": "invalid length", "timezone": "est", "emrsoftware": "greenway", "merlin": 1, "prm": 1, "calldaysout": 2, "emaildaysout": 5, "enablevoice": 1, "enabletext": 1, "enablemail": 1, "exclude": "12 months,12-17 years,18+ years,2 months,", "emailbtnconfirm": 1, "emailbtnreschedule": 1, "emailbtncancel": 1, "enablenoshow": 1, "enablecollection": 0, "enablerecall": 1, "enableapptalert": 1, "appendcallerid": "confirm,cancel,resched,ansmach", "emailreport": "kevin@relatient.net,john@relatient.net,hello@gim.com", "emailreport_err": "ok", "surveyreport": "chris@relatient.net", "surveyreport_err": "ok", "hmreport": "john@relatient.net,kevin@relatient.net", "hmreport_err": "ok", "apptreminders" : { "croncalls": { "croncalls_570": { "starthour": 18, "startqtrhour": 0, "starttime_local": "7:00 pm est", "endhour": 19, "endqtrhour": 0, "endtime_local": "8:00 pm est", "calldays": "motuwethfr" } }, "cronemail": { "cronemail_110": { "hour": 18, "qtrhour": 99, "starttime_local": "invalid est", "appttimemath": "", "emaildays": "motuwethfr" } }, "cronsms": { "cronsms_82": { "hour": 7, "qtrhour": 0, "starttime_local": "8:00 est", "daysout": 0, "cronargid": 1, "cronargid_type": "frombulk", "appttimemath": "", "workdays": "motuwethfr", "sendondays": "tuwethfr", "cronsms_err": "ok" } } }, "healthmaint" : { "cronhmcalls": { "cronhmcalls_2": { "starthour": 12, "startqtrhour": 0, "starttime_local": "1:00 pm est", "endhour": 16, "endqtrhour": 0, "endtime_local": "5:00 pm est", "activedays": "motuwefrsa" } }, "cronhmemail": { "cronhmemail_1": { "hour": 3, "qtrhour": 3, "starttime_local": "4:45 est", "activedays": "thfrsa" } }, "cronhmsms": { "cronhmsms_1": { "hour": 2, "qtrhour": 2, "starttime_local": "3:30 est", "activedays": "sututhsa" } } }, "mdpay" : { "cronmdpaycalls": { "cronmdpaycalls_2": { "hour": 15, "qtrhour": 3, "starttime_local": "4:45 pm est", "activedays": "mowefr" } }, "cronmdpayemail": { "cronmdpayemail_2": { "hour": 13, "qtrhour": 1, "starttime_local": "2:15 pm est", "activedays": "mofr" } }, "cronmdpaysms": { "cronmdpaysms_2": { "hour": 15, "qtrhour": 1, "starttime_local": "4:15 pm est", "activedays": "su" } } }, "noshow" : { "cronnoshowcalls": { } }, "recall" : { "cronrecallcalls": { "cronrecallcalls_4": { "hour": 11, "qtrhour": 0, "starttime_local": "12:00 pm est", "activedays": "motuwethfr" } } }, "cronemailreports": { "cronemailreport_155": { "hour": 20, "qtrhour": 1, "starttime_local": "9:15 pm est", "daysout": 4, "csv": 1, "reportargid": 3, "reportargid_type": "calltime", "workdays": "sumotuthfrsa", "sendondays": "motuwethfr" } }, "callcntnotstatus99": 3680, "crontab": { }, "incomingfiles": { "file_1": "payments.json", "file_1_changed": "2015-04-08 10:44", "file_1_lines": 222, "file_2": "recall.csv", "file_2_changed": "2014-04-17 08:58", "file_2_lines": 0, "file_3": "elerts.txt", "file_3_changed": "2014-12-11 14:14", "file_3_lines": 21, "file_4": "noshow.csv", "file_4_changed": "2014-04-17 08:44", "file_4_lines": 0, "file_5": "daily.txt", "file_5_changed": "2014-10-29 12:50", "file_5_lines": 188, "file_6": "bulk.csv", "file_6_changed": "2014-10-20 14:41", "file_6_lines": 1 } } }}  ',    obj = json.parse(jsontext),    path = '',    table = $('#configurationtable'),    parent = '';    console.log(obj);  // if no object available, rerturn false  if (typeof obj !== 'object') {    console.log('error');    return false;  }    $.each(obj, lp);    // build table  function lp(key, val) {    var savepath = path;    path = path ? (path + "-" + key) : key;      // create table structure    var struct = path,      structarr = path.split('-'),      length = (structarr.length > 2) ? structarr.length - 1 : structarr.length,      last = '';      // recursion children    if (val !== null && typeof val === "object") {      (var v in structarr) {        if (last != '') {          last = $('table.' + structarr[v], last);          if (last.length == 0) {            console.log(parent);            parent.append('<b>' + structarr[v] + '</b><table class="' + structarr[v] + '"><tr></tr></table>');            parent = $('.' + structarr[v], parent);          } else {            }        } else {          last = $('table.' + structarr[v], table);          if (last.length == 0) {            table.append('<b>' + structarr[v] + '</b><table class="' + structarr[v] + '"><tr></tr></table>');            parent = $('.' + structarr[v], table);          }        }      }        // recursion      $.each(val, lp);    }    // show values per div    else {      $(parent).append('<tr><td class="name">' + key + '</td><td class="value">' + val + '</td></tr>');      }    path = savepath;  }    $('.jsonconfig').html(table);

<h3>configuration json</h3>  <div class="form_panel jsonconfig">        <table id="configurationtable"></table>  </div>

**incorrect response deleted**

okay after while of going though code, kind of figured out (i think) why going wrong. reason because, looking @ pastebin on both conditions check value of variable last see if there anymore child tables created, performing append. .append() function edits value of selector element , adds chosen text it. not add chosen text next (after) chosen element.

hence getting table format 100% nested instead of systematic nesting in accordance json structure. ie this{ this{ this{ this{ this{} } } } } , not this{ this{ this{} this{} } this{ this{} this{} this{} } this{ this{} } } etc. lol xp

i suggest use .after() or .insertafter() function make sure @ last child next table added after , not appended markup.

i hope helps.