Вложенный объект JSON в HTML Вложенная таблица

-1

У меня возникли проблемы с тем, чтобы это правильно вложить. Он должен быть вложен так же, как объект вложен. Td для ключа и новая td/table для объектов или значения, показывает таблицу с именем/значением.Вложенный объект JSON в HTML Вложенная таблица

Любое направление поможет.

Строка JSON заключается в следующем:

{ 
"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": "[email protected],[email protected],[email protected]", 
     "EmailReport_err": "OK", 
     "SurveyReport": "[email protected]", 
     "SurveyReport_err": "OK", 
     "HMReport": "[email protected],[email protected]", 
     "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 AM 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 AM EST", 
        "ActiveDays": "ThFrSa" 
       } 
      }, 
      "cronHMSMS": { 
       "cronHMSMS_1": { 
        "hour": 2, 
        "qtrhour": 2, 
        "StartTime_local": "3:30 AM 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 
     } 
    } 
} 
}

Вот код, я использую для создания HTML-таблицы:

// 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": "[email protected],[email protected],[email protected]", "EmailReport_err": "OK", "SurveyReport": "[email protected]", "SurveyReport_err": "OK", "HMReport": "[email protected],[email protected]", "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 AM 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 AM EST", "ActiveDays": "ThFrSa" } }, "cronHMSMS": { "cronHMSMS_1": { "hour": 2, "qtrhour": 2, "StartTime_local": "3:30 AM 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 for children 
 
    if (val !== null && typeof val === "object") { 
 
    for (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>

источник

2015-04-22 jamadri

Так оно работает без вложенных данных? Также, пожалуйста, поместите это в jsfiddle? –

Какую консольную ошибку вы получаете? – shadoweye14

Я получу скрипку. И я не получаю ошибку. Он просто отображается неверно. Это гнездится вот так. table {table {table {table {}}}}. – jamadri

** Неправильный ответ Deleted **

Итак, через некоторое время, пройдя свой код, я как бы понял (я думаю), почему вы ошибаетесь. Причина в том, что, глядя на это Pastebin на оба условия, где вы проверяете значение переменной last, чтобы увидеть, есть ли еще созданные дочерние таблицы, вы выполняете добавление. Функция .append() изменяет значение элемента селектора и добавляет к нему выбранный текст. Он не добавляет выбранный вами текст рядом с (после) выбранного вами элемента.

Следовательно, вы получаете формат таблицы, который на 100% вложен вместо систематического вложения в соответствии с вашей структурой JSON. т.е. this{ this{ this{ this{ this{} } } } } и не this{ this{ this{} this{} } this{ this{} this{} this{} } this{ this{} } } т.д. лол хР

Я предлагаю вам использовать что-то вроде .after() или .insertAfter() функции, чтобы убедиться, что у последнего ребенка следующая таблица, чтобы добавить после и не добавляются к разметке.

Надеюсь, это поможет.

источник

2015-04-22 19:19:06 shadoweye14

Это именно то, как он отображается. Мне нужно, чтобы он отображался правильно, хотя. Если вы посмотрите на содержимое, оно вложите его в таблицу за таблицей. Мне нужно, чтобы он был вложен как объект. Это моя проблема. – jamadri

Я вижу. Я неправильно понял, что позвольте вернуться к вам. – shadoweye14

Спасибо. Это очень полезно – jamadri

Вложенный объект JSON в HTML Вложенная таблица

ответ

Смежные вопросы