0

見つけたコードを少し修正しましたが、思うように動作させることができません。これは現在の 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_;
    }
}

これは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;}

電話をかけるには、次のようにします。

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

非常にうまく機能しますが、私が望むものではありません.現在、配列テーブルは次のように表示されています:

NAME 123123
ID 1
CATEGORY 12412

NAME AAAA
ID 2
CATEGORY 2123

配列テーブルの表示方法を変更したいのですが、それらが垂直方向に必要であり、すべてのデータが 1 つのテーブル構造にあり、各レジ​​スタのテーブルが多くない必要があります。このような：

NAME ID CATEGORY
123123 1 12412
AAAA 2 2123

このような結果を作成するには、再帰的な Javascript をどのように変更する必要がありますか?

4

1 に答える 1

0

みんなやった！_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;
}

したがって、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;
}

この accountId のような文字列を capslock 認識によって account_Id に分離するために使用される「spaceRawKeyName」関数に興味がある場合。

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

もちろん、あとで .toUpperCase() を作成して、もう少しファンシーな ACCOUNT_ID に見えるようにすることもできます...「_」を追加したくない場合は、単純にスペースに置き換えることができます。

于 2013-05-09T19:48:35.913 に答える