Angular JS渲染JSON樹形格式

Question

如何渲染JSON樹，就像http://jsonviewer.stack.hu/一樣使用angular JS？

Answer 1

您感興趣的技術是'遞歸指令'。如果你還不知道如何編寫指令，那麼你應該先開始學習它。 Angular JS官方文檔在解釋關於指令的問題時有了很大的改進Creating Custom Directives

一旦你知道如何編寫自定義指令，你可以瞭解遞歸指令。我發現這個Google網上論壇線程有幫助：Recursive directives。尤其是，我發現Mark Lagendijk的遞歸助手服務在該線程中非常有用。

確保在此處簽出示例。你一些相關的例子是：

plnkr
jsfiddle

在上述的jsfiddle例子，來看看：

module.directive("tree", function($compile) { 
    return { 
     restrict: "E", 
     transclude: true, 
     scope: {family: '='}, 
     template:  
      '<ul>' + 
       '<li ng-transclude></li>' + 
       '<p>{{ family.name }}</p>' + 
       '<li ng-repeat="child in family.children">' + 
        '<tree family="child"></tree>' + 
       '</li>' + 
      '</ul>', 
     compile: function(tElement, tAttr, transclude) { 
      var contents = tElement.contents().remove(); 
      var compiledContents; 
      return function(scope, iElement, iAttr) { 
       if(!compiledContents) { 
        compiledContents = $compile(contents, transclude); 
       } 
       compiledContents(scope, function(clone, scope) { 
         iElement.append(clone); 
       }); 
      }; 
     } 
    }; 
}); 

某些代碼以上是由馬克Lagendijk的遞歸助手抽象出來我上面提到的服務。

最後，我實現了angular-json-human，它在嵌套表結構中呈現JSON，這使得人們更容易閱讀。您可以修改它以適應您的需求。該演示是here和回購是here

希望這會有所幫助！

Answer 2

我已經使這個Angular指令以很好的方式呈現JSON。它的問世在涼亭：

https://github.com/mohsen1/json-formatter

Answer 3

我寫了一個函數來顯示角度的UI樹組成一個JSON數據。

的關鍵點在於以下幾點：

在您的解析程序，保持當前節點的「JSON字符串」在節點本身，每一個「不解析」的節點有這樣的有效載荷和「負荷」功能。

function parse(name, value) { 

    var node = { 
    name: name 
    }; 

    if (Array.isArray(value)) { 
    node.isEmpty = value.length === 0; 
    node.payload = value; 
    node.props = []; 
    node.load = function(node) { 
     for (var i = 0; i < node.payload.length; i++) { 
     node.props.push(parse(node.name + '[' + i + ']', node.payload[i])); 
     } 
     delete node.isEmpty; 
     delete node.payload; 
    } 
    } else if (value !== undefined && value !== null && typeof value === 'object') { 
    node.isEmpty = Object.keys(value).length === 0; 
    node.payload = value; 
    node.props = []; 
    node.load = function(node) { 
     var keys = Object.keys(node.payload); 
     for (var i = 0; i < keys.length; i++) { 
     node.props.push(parse(node.name + '.' + keys[i], node.payload[keys[i]])); 
     } 
     delete node.isEmpty; 
     delete node.payload; 
    } 
    } else { 
    node.value = value; 
    } 

    return node; 
} 

然後，當切換按鈕，用戶點擊一下，你可以調用這個函數來塔數據分析樹的下一個節點，並綁定到HTML。

可以用例子更清晰： https://jsfiddle.net/MatteoTosato/ghm4z606/