0

私はajaxを使用してjson APIを照会しています。それは私が視覚化したいツリーのような構造を与えてくれます。サンプル応答は次のようになります

{
  "nicos": {
    "_lastconfig_": {
      "poller": {
        "alwayspoll": [], 
        "blacklist": [], 
        "neverpoll": [
          "detector"
        ]
      }
    }, 
    "poller": {
      "alwayspoll": [], 
      "autosetup": true, 
      "blacklist": [], 
      "description": "", 
      "loglevel": "info", 
      "lowlevel": false, 
      "neverpoll": [
        "detector"
      ], 
      "poll": []
    }
  }
}

これを動的に解析し、テーブルとして視覚化したいと思います。可能な出力は

<h1>nicos</h1>
<h2>_last_config_</h2>
<table>
  <tr><td>alwayspoll</td><td>[]</td></tr>
  <tr><td>blacklist</td><td>[]</td></tr>
  <tr><td>neverpoll</td><td>[detector]</td></tr>
</table>
<h2>poller</h2>
<table>
  <tr><td>alwayspoll</td><td>[]</td></tr>
  <tr><td>autosetup</td><td>true</td></tr>
  <tr><td>blacklist</td><td>[]</td></tr>
  <tr><td>description</td><td></td></tr>
  <tr><td>loglevel</td><td>info</td></tr>
  <tr><td>lowlevel</td><td>false</td></tr>
  <tr><td>neverpoll</td><td>[detector]</td></tr>
  <tr><td>poll</td><td>[]</td></tr>
</table>

私はJavaScriptの完全な初心者なので、どうすればそれを達成できるかについてアドバイスを求めています。ajax の部分は問題ではありませんが、解析が気になります。

4

3 に答える 3

1

オブジェクトを定義リスト（<dl>）に解析するには、このようなコード（fiddleの例）を使用します。

function objToDefnList(obj) { // returns a `<dl>` node (not appended to DOM Tree)
    var dl = document.createElement('dl'),
        dt, dd, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            // title
            dt = document.createElement('dt');
            dt.appendChild(document.createTextNode(key));
            dl.appendChild(dt);
            // defn.
            dd = document.createElement('dd');
            if (typeof obj[key] !== 'object') {
                dd.appendChild(document.createTextNode(obj[key].toString()));
            } else {
                dd.appendChild(objToDefnList(obj[key])); // recurse
            }
            dl.appendChild(dd);
        }
    }
    return dl; // done, return
}

非常に簡単に変更して、任意の種類のリスト（たとえば<ul>、 ）を使用したり、<ol>より多くの情報を表示したり（たとえばtypeof obj[key]）することができます。おそらく要素のスタイルを設定する必要があります。その例については、フィドルも参照してください。

を提案してくれたepascarelloに感謝します。 <dl><ul>

于 2013-01-23T14:34:05.690 に答える
1

このコードを試してください：

function parse(obj){
    var s = '<table>';
    for(var k in obj){
        if(typeof obj[k] === 'object'){
            s += '<tr><td>'+k+'</td><td>'+parse(obj[k])+'</td></tr>\n';
        }else{
            s += '<tr><td>'+k+'</td><td>'+obj[k]+'</td></tr>\n';
        }
    }
    return s + '</table>\n';
}
parse(myJson);

出力：

    <table>
    <tr><td>nicos</td><td>
        <table>
            <tr><td>_lastconfig_</td><td>
                <table>
                    <tr><td>poller</td><td>
                        <table>
                            <tr><td>alwayspoll</td><td>
                                <table>
                                    <tr><td>0</td><td>1</td></tr>
                                    <tr><td>1</td><td>2</td></tr>
                                    <tr><td>2</td><td>3</td></tr>
                                </table>
                            </td></tr>
                            <tr><td>blacklist</td><td>
                                <table>
                                    <tr><td>0</td><td>X</td></tr>
                                    <tr><td>1</td><td>Y</td></tr>
                                    <tr><td>2</td><td>Z</td></tr>
                                </table>
                            </td></tr>
                            <tr><td>neverpoll</td><td>
                                <table>
                                    <tr><td>0</td><td>detector</td></tr>
                                </table>
                            </td></tr>
                        </table>
                    </td></tr>
                </table>
            </td></tr>
            <tr><td>poller</td><td>
                <table>
                    <tr><td>alwayspoll</td><td>
                        <table>
                        </table>
                    </td></tr>
                    <tr><td>autosetup</td><td>true</td></tr>
                    <tr><td>blacklist</td><td>
                        <table>
                        </table>
                    </td></tr>
                    <tr><td>description</td><td></td></tr>
                    <tr><td>loglevel</td><td>info</td></tr>
                    <tr><td>lowlevel</td><td>false</td></tr>
                    <tr><td>neverpoll</td><td>
                        <table>
                            <tr><td>0</td><td>detector</td></tr>
                        </table>
                    </td></tr>
                    <tr><td>poll</td><td>
                        <table>
                        </table>
                    </td></tr>
                </table>
            </td></tr>
        </table>
    </td></tr>
</table>

（配列にいくつかの変数を追加して、それらも機能することを示しました）

于 2013-01-23T13:53:44.920 に答える
0

JSON から HTML テーブルへの変換は、ほぼ間違いなく発明された車輪です。

https://github.com/afshinm/Json-to-HTML-Table

于 2013-01-23T13:58:01.650 に答える