[英]How do I fix this JSON object to html table code?
I've been modifying a little bit a piece of code I found, but I can't make it work as I want. 我一直在修改我发现的一段代码,但是我无法使其按需工作。 This is the current Javascript: 这是当前的Javascript:
function JsonUtil() {
/**
* Given a provided object,
* return a string representation of the 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 and display array as an HTML table.
*/
this.tableifyArray = function (array_) {
if (array_.length === 0) {
return "[ empty ]";
}
var _out = "<table class='arrayTable'>";
for(var i = 0; i < array_.length; i++) {
_out += "<tr class='arrayTr'><td class='arrayTd'>"
+ this.tableifyObject(array_[i]) + "</td></tr>";
}
_out += "</table>";
return _out;
},
/**
* Recursively search and display common javascript types as an HTML table.
*/
this.tableifyObject = function (obj_) {
/*
if (obj_ === '') {
return "[ empty ]";
}
*/
switch (this.isType(obj_)) {
case "null":
return "¡The data object is 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 and display associative array as an HTML table.
*/
this.tableifyAssociative = function (array_) {
if (this.isEmpty(array_)) {
return "{ empty }";
}
var _out = "<table class='associativeTable'>";
for (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 an associative array is empty
*/
this.isEmpty = function (map_) {
for (var _key in map_) {
if (map_.hasOwnProperty(_key)) {
return false;
}
}
return true;
},
/**
* Identify is an array is a 'normal' (not associative) array
*/
this.isArray = function (v_) {
return Object.prototype.toString.call(v_) == "[object Array]";
},
/**
* given the desire to populate a map of maps, adds a master key,
* and child key and value to a 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 is it's CSS: 这是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 to call you just simply do: 并打电话给您,只需执行以下操作:
var json = new JsonUtil();
json.tableifyObject(jsonObject);
Works really great but is not what I want, currently the array table is being shown like the following: 确实很棒,但不是我想要的,当前正在显示数组表,如下所示:
NAME 123123
ID 1
CATEGORY 12412
NAME AAAA
ID 2
CATEGORY 2123
I want to modify how the array tables are shown, need them vertically and all the data in one single table structure and not a lot of tables from each register. 我想修改数组表的显示方式,垂直需要它们,并且所有数据都放在一个表结构中,而不需要每个寄存器中的很多表。 Like this: 像这样:
NAME ID CATEGORY
123123 1 12412
AAAA 2 2123
How would I need to change the recursive Javascript in order to create such result? 我如何需要更改递归Javascript才能创建这样的结果?
Made it guys! 做到了! added the code to generate another type of table if the _obj is an array. 如果_obj是数组,则添加了代码以生成另一种类型的表。 Just in case someone needs the same thing, this 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 the entire json library for JSON Object to HTML is the following now: 因此,用于JSON对象到HTML的整个json库现在如下所示:
function JsonUtil() {
/**
* Given a provided object,
* return a string representation of the 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 and display array as an HTML table.
*/
this.tableifyArray = function (array_) {
if (array_.length === 0) {
return "[ empty ]";
}
var _out = createTableBasedOnJsonArray(array_);
return _out;
},
/**
* Recursively search and display common javascript types as an HTML table.
*/
this.tableifyObject = function (obj_) {
switch (this.isType(obj_)) {
case "null":
return "¡The data object is 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 and display associative array as an HTML table.
*/
this.tableifyAssociative = function (array_) {
if (this.isEmpty(array_)) {
return "{ empty }";
}
var _out = "<table class='associativeTable'>";
for (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 an associative array is empty
*/
this.isEmpty = function (map_) {
for (var _key in map_) {
if (map_.hasOwnProperty(_key)) {
return false;
}
}
return true;
},
/**
* Identify is an array is a 'normal' (not associative) array
*/
this.isArray = function (v_) {
return Object.prototype.toString.call(v_) == "[object Array]";
},
/**
* given the desire to populate a map of maps, adds a master key,
* and child key and value to a 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 someone is interested in the "spaceRawKeyName" function, which is used to separate a string like this accountId to account_Id by capslock recognition. 如果有人对“ spaceRawKeyName”功能感兴趣,该功能用于通过大写锁定识别将类似于accountId的字符串分隔为account_Id。
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 you can make a .toUpperCase() later to make it look a little bit more fancy ACCOUNT_ID, btw... if you don't want to add a "_" you can simply replace it for a space. 当然,您可以稍后再创建一个.toUpperCase(),使其看起来更漂亮一点ACCOUNT_ID,顺便说一句...如果您不想添加“ _”,只需将其替换为空格即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.