javascript - How do I fix this JSON object to html table code? -
i've been modifying little bit piece of code found, can't make work want. current javascript:
function jsonutil() { /** * given provided object, * return string representation of object type. */ this.istype = function (obj_) { if (obj_ === null) { return "null"; } if (obj_ === nan) { return "nan"; } var _type = typeof obj_; switch (_type) { case "undefined": return "undefined"; case "number": return "number"; case "boolean": return "boolean"; case "string": return "string"; case "function": return "function"; case "object": if (this.isarray(obj_)) { return "array"; } return "associative"; } }, /** * recursively search , display array html table. */ this.tableifyarray = function (array_) { if (array_.length === 0) { return "[ empty ]"; } var _out = "<table class='arraytable'>"; for(var = 0; < array_.length; i++) { _out += "<tr class='arraytr'><td class='arraytd'>" + this.tableifyobject(array_[i]) + "</td></tr>"; } _out += "</table>"; return _out; }, /** * recursively search , display common javascript types html table. */ this.tableifyobject = function (obj_) { /* if (obj_ === '') { return "[ empty ]"; } */ switch (this.istype(obj_)) { case "null": return "¡the data object null!"; case "undefined": return "undefined"; case "number": return obj_; case "boolean": return obj_; case "string": return obj_; case "array": return this.tableifyarray(obj_); case "associative": return this.tableifyassociative(obj_); } return "!error converting object!"; }, /** * recursively search , display associative array html table. */ this.tableifyassociative = function (array_) { if (this.isempty(array_)) { return "{ empty }"; } var _out = "<table class='associativetable'>"; (var _index in array_) { _out += "<tr class='associativetr'><td class='associativetd'>" + this.tableifyobject(_index) + "</td><td class='associativetd'>" + this.tableifyobject(array_[_index]) + "</td></tr>"; } _out += "</table>"; return _out; }, /** * identify if associative array empty */ this.isempty = function (map_) { (var _key in map_) { if (map_.hasownproperty(_key)) { return false; } } return true; }, /** * identify array 'normal' (not associative) array */ this.isarray = function (v_) { return object.prototype.tostring.call(v_) == "[object array]"; }, /** * given desire populate map of maps, adds master key, * , child key , value provided object. */ this.addtomapofmaps = function (map_, mkey_, key_, value_) { if (map_ === undefined) { map_ = {}; } if (map_[mkey_] === undefined) { map_[mkey_] = {} } if (map_[mkey_][key_] === undefined) { map_[mkey_][key_] = null; } map_[mkey_][key_] = value_; return map_; } } this it's css:
.arraytable { border: 1px solid #c2c2c2; background-color: #c2c2c2; padding: 5px;} .arraytr { border: 1px solid #c2c2c2; background-color: #c2c2c2; padding: 5px;} .arraytd { border: 1px solid #c2c2c2; background-color: #c2c2c2; padding: 5px; vertical-align: top;} .associativetable { border: 1px solid #c2c2c2; background-color: #fff; padding: 5px;} .associativetr { border: 1px solid #c2c2c2; background-color: #fff; padding: 5px;} .associativetd { border: 1px solid #c2c2c2; background-color: #eee; padding: 5px; vertical-align: top;} and call do:
var json = new jsonutil(); json.tableifyobject(jsonobject); works great not want, array table being shown following:
name 123123 id 1 category 12412 name aaaa id 2 category 2123 i want modify how array tables shown, need them vertically , data in 1 single table structure , not lot of tables each register. this:
name id category 123123 1 12412 aaaa 2 2123 how need change recursive javascript in order create such result?
made guys! added code generate type of table if _obj array. in case needs same thing, works excellent!
function createtablebasedonjsonarray(array_) { var _out = ""; for(var index in array_) { if(index == 0) { _out += "<table class='arraytable'><thead>"; //create thead for(var key in array_[0]) { _out += "<th>" + key + "</th>"; } _out += "</thead>"; } var values = array_[index]; //create tbody _out += "<tbody><tr class='arraytr'>"; for(var key in values) { _out += "<td class='arraytd'>" + values[key] + "</td>"; } _out += "</tr>"; } _out += "</tbody></table>" return _out; } so entire json library json object html following now:
function jsonutil() { /** * given provided object, * return string representation of object type. */ this.istype = function (obj_) { if (obj_ === null) { return "null"; } var _type = typeof obj_; switch (_type) { case "undefined": return "undefined"; case "number": return "number"; case "boolean": return "boolean"; case "string": return "string"; case "function": return "function"; case "object": if (this.isarray(obj_)) { return "array"; } return "associative"; } }, /** * recursively search , display array html table. */ this.tableifyarray = function (array_) { if (array_.length === 0) { return "[ empty ]"; } var _out = createtablebasedonjsonarray(array_); return _out; }, /** * recursively search , display common javascript types html table. */ this.tableifyobject = function (obj_) { switch (this.istype(obj_)) { case "null": return "¡the data object null!"; case "undefined": return "undefined"; case "number": return obj_; case "boolean": return obj_; case "string": return obj_; case "array": return this.tableifyarray(obj_); case "associative": return this.tableifyassociative(obj_); } return "!error converting object!"; }, /** * recursively search , display associative array html table. */ this.tableifyassociative = function (array_) { if (this.isempty(array_)) { return "{ empty }"; } var _out = "<table class='associativetable'>"; (var _index in array_) { _out += "<tr class='associativetr'><td class='associativetd'>" + this.tableifyobject(_index) + "</td><td class='associativetd'>" + this.tableifyobject(array_[_index]) + "</td></tr>"; } _out += "</table>"; return _out; }, /** * identify if associative array empty */ this.isempty = function (map_) { (var _key in map_) { if (map_.hasownproperty(_key)) { return false; } } return true; }, /** * identify array 'normal' (not associative) array */ this.isarray = function (v_) { return object.prototype.tostring.call(v_) == "[object array]"; }, /** * given desire populate map of maps, adds master key, * , child key , value provided object. */ this.addtomapofmaps = function (map_, mkey_, key_, value_) { if (map_ === undefined) { map_ = {}; } if (map_[mkey_] === undefined) { map_[mkey_] = {} } if (map_[mkey_][key_] === undefined) { map_[mkey_][key_] = null; } map_[mkey_][key_] = value_; return map_; } } function createtablebasedonjsonarray(array_) { var _out = ""; for(var index in array_) { if(index == 0) { _out += "<table class='arraytable'><thead>"; //create thead for(var key in array_[0]) { _out += "<th>" + spacerawkeyname(key).touppercase() + "</th>"; } _out += "</thead>"; } var values = array_[index]; //create tbody _out += "<tbody><tr class='arraytr'>"; for(var key in values) { _out += "<td class='arraytd'>" + values[key] + "</td>"; } _out += "</tr>"; } _out += "</tbody></table>" return _out; } if interested in "spacerawkeyname" function, used separate string accountid account_id capslock recognition.
function spacerawkeyname(string) { var newone = []; for(i=0; i<string.length;i++) { character = string.charat(i); if(character == character.touppercase()) { newone.push("_"); } newone.push(character); } var text = ""; for(i=0;i < newone.length;i++){ text += newone[i]; } return text; } of course can make .touppercase() later make little bit more fancy account_id, btw... if don't want add "_" can replace space.
Comments
Post a Comment