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.
Comments
Post a Comment