Javascript 如何将此JSON对象修复为html表代码？

我一直在修改我找到的一段代码，但我不能让它按我想要的方式工作。这是当前的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_;
    }
}

要打电话给你，只需执行以下操作：

var json = new JsonUtil();
json.tableifyObject(jsonObject);

工作非常好，但不是我想要的，当前数组表显示如下：

NAME 123123
ID 1
CATEGORY 12412

NAME AAAA
ID 2
CATEGORY 2123

我想修改数组表的显示方式，需要它们垂直显示，所有数据都在一个表结构中，而不是每个寄存器中有很多表。像这样：

NAME ID CATEGORY
123123 1 12412
AAAA 2 2123

---

为了创建这样的结果，我需要如何更改递归Javascript？

让人满意！添加代码以生成另一种类型的表（如果_obj是数组）。 万一有人需要同样的东西，这个效果非常好

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;
}

函数createTableBasedOnJsonArray（数组）{ var _out=“”； for（数组中的var索引）{ 如果（索引==0）{ _out+=“”； //创建thead for（数组中的var键\u0]）{ _输出+=“”+键+“”； } _out+=“”； } var值=数组_U8;[索引]； //创建tbody _out+=“”； for（var输入值）{ _输出+=“”+值[键]+“”； } _out+=“”； } _输出+=“” 退出； } 现在，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;
}

函数JsonUtil（）{ /** *给定一个提供的对象， *返回对象类型的字符串表示形式。 */ this.isType=函数（obj_2;）{ 如果（对象=空）{ 返回“null”； } var _类型=对象的类型； 开关（U型）{ 案例“未定义”： 返回“未定义”； 案例“编号”： 返回“数字”； 案例“布尔”： 返回“布尔”； 大小写“字符串”： 返回“字符串”； 案例“功能”： 返回“函数”； 案例“对象”： 如果（这是isArray（obj_））{ 返回“数组”； } 返回“关联”； } }, /** *递归搜索并将数组显示为HTML表。 */ this.tableifyArray=函数（数组）{ if（数组长度===0）{ 返回“[空]”； } var\u out=createTableBasedOnJsonArray（数组）； 退出； }, /** *递归搜索常见javascript类型并将其显示为HTML表。 */ this.tableifyObject=函数（obj_）{ 开关（此.isType（obj_））{ “空”情况： 返回“数据对象为空！”； 案例“未定义”： 返回“未定义”； 案例“编号”： 返回对象； 案例“布尔”： 返回对象； 大小写“字符串”： 返回对象； 案例“数组”： 返回此.tableifyArray（obj_2;）； 案例“关联”： 返回此.tableifyAssociative（obj_2;）； } 返回“！转换对象时出错！”； }, /** *递归搜索关联数组并将其显示为HTML表。 */ this.tableifyAssociative=函数（数组）{ if（this.isEmpty（array_））{ 返回“{empty}”； } var _out=“”； for（数组中的var\u索引）{ _输出+=“” +此.tableifyObject（_索引）+“” +此.tableifyObject（数组_[_索引]）+“”； } _out+=“”； 退出； }, /** *标识关联数组是否为空 */ this.isEmpty=函数（映射）{ for（映射中的var\u键）{ if（map_u.hasOwnProperty（_键））{ 返回false； } } 返回true； }, /** *标识是一个数组是一个“普通”（非关联）数组 */ this.isArray=函数（v_30;）{ 返回Object.prototype.toString.call（v_）==“对象数组]”； }, /** *考虑到需要填充地图地图，添加一个主密钥， *以及提供对象的子键和值。 */ this.addToMapOfMaps=函数（map、mkey、key、value）{ 如果（映射=未定义）{ 映射{}； } 如果（映射[mkey]==未定义）{ map_uu[mkey_uuz]={} } 如果（映射[mkey][key][key]==未定义）{ map_uu[mkey][key_uu3;]=null； } 映射[mkey][key][uu]=值； 返回地图； } } 函数createTableBasedOnJsonArray（数组）{ var _out=“”； for（数组中的var索引）{ 如果（索引==0）{ _out+=“”； //创建thead for（数组中的var键\u0]）{ _out+=“”+PawKeyName（键）.toUpperCase（）+“”； } _out+=“”； } var值=数组_U8;[索引]； //创建tbody _out+=“”； for（var输入值）{ _输出+=“”+值[键]+“”； } _out+=“”； } _输出+=“” 退出； } 如果有人对“spaceRawKeyName”函数感兴趣，capslock recognition会使用该函数将类似于此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;
} 

函数名（字符串）{
var newone=[]；
for（i=0；i移动
来封装
for（…in.）
@mackiee我试过了，但是得到了另一个结果。Paul Grime，是的，我不知道为什么代码会包含这个，要删除它。我的大脑都被这个东西融化了哈哈哈：/有人帮忙吗？我不能让它工作了：/@mackiee耶：）谢谢！！我花了15分钟来思考这个函数，哈哈，但我必须先跟踪代码。
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;
}