jQueryを使用して任意にネストされたJSONのコンテンツを表示する方法は？

今日私はフロントエンドの帽子を置いて、ちょっとした問題を解決しようとしています。私は、ディレクトリツリーをマップAPIを書いて、次の構造を持つ私にJSONを与える：jQueryを使用して任意にネストされたJSONのコンテンツを表示する方法は？

{ 
    "0": { 
     "children": [ 
      { 
       "name": "still.txt", 
       "path": "/home/myname/docs/still.txt", 
       "type": "file" 
      }, 
      { 
       "name": "now.txt", 
       "path": "/home/myname/docs/now.txt", 
       "type": "file" 
      }, 
      { 
       "children": [ 
        { 
         "name": "names.txt", 
         "path": "/home/myname/docs/other-docs/names.txt", 
         "type": "file" 
        }, 
        { 
         "name": "places.txt", 
         "path": "/home/myname/docs/other-docs/places.txt", 
         "type": "file" 
        } 
       ], 
       "name": "other-docs", 
       "path": "/home/myname/docs/other-docs", 
       "type": "directory" 
      }, 
      { 
       "name": "address.txt", 
       "path": "/home/myname/docs/address.txt", 
       "type": "file" 
      } 
     ], 
     "name": "", 
     "path": "/home/myname/docs", 
     "type": "directory" 
    } 
}

これはサンプルですが、無限（大）ネストされたディレクトリがあるかもしれません。

これは私がどのように考えるかです（申し訳ありません、それは愚かだ場合、私はjQueryのに非常に新しいです）行われます

<!DOCTYPE html> 
<html> 
    <head> 
     <title>test</title> 
     <script src="jquery-3.2.1.min.js"></script> 
     <script> 
     $("#get_button").click(function(){ 
     $.getJSON('http://192.168.200.77/api/', function(result){ 
      $(result).each(function(i, result){ 
       // Here something happens 
       $(content).appendTo("#files"); 
      }); 
     }); 
     }); 
     </script> 
    </head> 
    <body> 
     <h1> 
     Test Client 
     </h1> 
     <button id="get_button" type="button"> Get Tree </button> 
     <div id = "files"></div> 
    </body> 
</html>

は正しい方法で行わリクエストですか？ APIは、GET要求のデータを要求しません。

ディレクトリの場合はid = "folder"、ファイルの場合はid = "file"の要素を持つ要素のリストを作成したいとします。どうしたの？

出典

2017-05-26 Mikael

検索。 https://www.jstree.com/api/ – orberkov

また、getJSONコールバックにも「result」パラメータ – vabii

http：//があるため、各コールバック内の「result」の名前を変更することもできます – Woodrow

をObject.values()を使用することができます。それが動作する例についてはスニペットをご覧ください。 jqueryのツリープラグインの

$.getJSON('https://api.myjson.com/bins/1a2g9x/', function(result) { 
 
    //console.log(result[0]); 
 
    $('#tree1').tree({ 
 
    data: [result[0]], 
 
    autoOpen: true, 
 
    dragAndDrop: true 
 
    }); 
 
});

<link href="https://mbraak.github.io/jqTree/jqtree.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://mbraak.github.io/jqTree/tree.jquery.js"></script> 
 
<div id="tree1"></div>

出典

2017-05-26 20:18:20 Woodrow

ありがとう、それは魅力のように動作します。 – Mikael

あなたは、データが配列として渡されることを確認する必要があり、for..ofループ、オブジェクトの値を反復するためにjqTreeのために再帰

const data = { 
 
    "0": { 
 
    "children": [{ 
 
     "name": "still.txt", 
 
     "path": "/home/myname/docs/still.txt", 
 
     "type": "file" 
 
     }, 
 
     { 
 
     "name": "now.txt", 
 
     "path": "/home/myname/docs/now.txt", 
 
     "type": "file" 
 
     }, 
 
     { 
 
     "children": [{ 
 
      "name": "names.txt", 
 
      "path": "/home/myname/docs/other-docs/names.txt", 
 
      "type": "file" 
 
      }, 
 
      { 
 
      "name": "places.txt", 
 
      "path": "/home/myname/docs/other-docs/places.txt", 
 
      "type": "file" 
 
      } 
 
     ], 
 
     "name": "other-docs", 
 
     "path": "/home/myname/docs/other-docs", 
 
     "type": "directory" 
 
     }, 
 
     { 
 
     "name": "address.txt", 
 
     "path": "/home/myname/docs/address.txt", 
 
     "type": "file" 
 
     } 
 
    ], 
 
    "name": "", 
 
    "path": "/home/myname/docs", 
 
    "type": "directory" 
 
    } 
 
} 
 

 
console.log(Object.values(data)); 
 

 
const [files, folders] = [ 
 
    document.getElementById("file") 
 
, document.getElementById("folder") 
 
]; 
 

 
const processNode = node => { 
 

 
     const {children, name, path, type} = node; 
 
    
 
     (type === "file" ? files : folders).innerHTML += `name:${name}, path:${path}, type:${type}<br>`; 
 
    
 
     if (children) 
 
     for (let child of children) 
 
      processNode(child); 
 
} 
 

 
const fn = o => { 
 

 
    for (let node of Object.values(data)) processNode(node); 
 
    
 
} 
 

 
fn(data);

<div id="file"><b>files:</b><br></div><br> 
 
<div id="folder"><b>folders:</b><br></div>

出典

2017-05-26 19:18:39 guest271314

jQueryを使用して任意にネストされたJSONのコンテンツを表示する方法は？

答えて

関連する問題