Javascript 在AngularJS中显示JSON_Javascript_Json_Angularjs

Javascript 在AngularJS中显示JSON

javascript json angularjs

Javascript 在AngularJS中显示JSON,javascript,json,angularjs,Javascript,Json,Angularjs,我想使用AngularJS显示JSON输出。最好的方法是什么？gridOptions是个好主意吗？我只想打印标签/家长标签/家长标签/。。。以相反的顺序直到根 { artifactId:"6450", classificationId:6451, id:3276, hierarchyId:"lp", label:"Authorization", nodeId:"84", parent:{ id:3275, hiera

我想使用AngularJS显示JSON输出。最好的方法是什么？gridOptions是个好主意吗？我只想打印标签/家长标签/家长标签/。。。以相反的顺序直到根

   {  
   artifactId:"6450",
   classificationId:6451,
   id:3276,
   hierarchyId:"lp",
   label:"Authorization",
   nodeId:"84",
   parent:{  
      id:3275,
      hierarchyId:"lp",
      label:"Authorize",
      nodeId:"83",
      createdBy:"INITIAL-LOAD",
      createdOn:"2014-09-12T16:21:23Z",
      updatedBy:"INITIAL-LOAD",
      updatedOn:"2014-09-12T16:21:23Z",
      parent:{  
         id:3193,
         hierarchyId:"lp",
         label:"Actions & Verbs",
         nodeId:"1",
         createdBy:"INITIAL-LOAD",
         createdOn:"2014-09-12T16:21:17Z",
         updatedBy:"INITIAL-LOAD",
         updatedOn:"2014-09-12T16:21:17Z",
         parent:{  
            id:3192,
            hierarchyId:"lp",
            label:"root",
            nodeId:"13190",
            createdBy:"INITIAL-LOAD",
            createdOn:"2014-09-12T16:21:14Z",
            updatedBy:"INITIAL-LOAD",
            updatedOn:"2014-09-12T16:21:14Z"
         }
      }
   },
   parentNodeId:"83",
   createdBy:"INITIAL-LOAD",
   createdOn:"2014-09-12T16:21:23Z",
   updatedBy:"INITIAL-LOAD",
   updatedOn:"2014-09-12T16:21:23Z"
},
{  
   artifactId:"6450",
   classificationId:6452,
   id:3280,
   hierarchyId:"lp",
   label:"Licensee",
   nodeId:"88",
   parent:{  
      id:3276,
      hierarchyId:"lp",
      label:"Authorization",
      nodeId:"84",
      createdBy:"INITIAL-LOAD",
      createdOn:"2014-09-12T16:21:23Z",
      updatedBy:"INITIAL-LOAD",
      updatedOn:"2014-09-12T16:21:23Z",
      parent:{  
         id:3275,
         hierarchyId:"lp",
         label:"Authorize",
         nodeId:"83",
         createdBy:"INITIAL-LOAD",
         createdOn:"2014-09-12T16:21:23Z",
         updatedBy:"INITIAL-LOAD",
         updatedOn:"2014-09-12T16:21:23Z",
         parent:{  
            id:3193,
            hierarchyId:"lp",
            label:"Actions & Verbs",
            nodeId:"1",
            createdBy:"INITIAL-LOAD",
            createdOn:"2014-09-12T16:21:17Z",
            updatedBy:"INITIAL-LOAD",
            updatedOn:"2014-09-12T16:21:17Z",
            parent:{  
               id:3192,
               hierarchyId:"lp",
               label:"root",
               nodeId:"13190",
               createdBy:"INITIAL-LOAD",
               createdOn:"2014-09-12T16:21:14Z",
               updatedBy:"INITIAL-LOAD",
               updatedOn:"2014-09-12T16:21:14Z"
            }
         }
      }
   },
   parentNodeId:"84",
   createdBy:"INITIAL-LOAD",
   createdOn:"2014-09-12T16:21:23Z",
   updatedBy:"INITIAL-LOAD",
   updatedOn:"2014-09-12T16:21:23Z"
},

所以我有点像：

<table>
 <tr ng-repeat='label in labels'> 
<td> label.label </td>
<td> label.parent.label</td>
<td> label.parent.parent.label</td>
</tr>
</table>


标签
label.parent.label
label.parent.parent.label

我肯定这看起来不对。如何反向显示根目录之前的所有标签？因此，在这种情况下，它将是Root/Action&verbs/Authorize/Authorization

您可以编写一个简单的作用域函数，遍历对象树并为每个标签对象构造一个数组：

$scope.getAncestorLabelsForLabel = function (labelObj){
    var labels = [];
    while (labelObj) {
        labels.push(labelObj.label);
        labelObj = labelObj.parent;
    }
    labels = labels.reverse();
    return labels;
};

基本上，对于每个包含父对象的label对象，我们称之为scope方法，它构造一个标签数组

我不知道你在哪里使用这样的json？！但我觉得这很有趣，因为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>!!!</title>
    <style type="text/css">
        td{
            border: 2px dotted green;
            padding: 4px;
            background-color: #aaa;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
</head>
<body ng-app="MonApp">
    <div ng-controller="CommentsCtrl">
        <!-- all elements in comments ||| ng-repeat do foreach -->
        <table>
             <tr ng-repeat='label in labels'> 
                <td> {{label.label}} </td>
                <td> {{label.parent.label}}</td>
                <td> {{label.parent.parent.label}}</td>
            </tr>
        </table>

    </div>  


    <script>
        // create a object for using angular in this body.document (body ng-app="MonApp")
        var app = angular.module('MonApp', []);
        // create controller    
        app.controller('CommentsCtrl', function($scope){
        // create or get json with some name, here "comments"
        $scope.labels = [
            {
                artifactId: "6450",
                classificationId: 6451,
                id: 3276,
                hierarchyId: "lp",
                label: "Authorization",
                nodeId: "84",
                parent: {
                    id: 3275,
                    hierarchyId: "lp",
                    label: "Authorize",
                    nodeId: "83",
                    createdBy: "INITIAL-LOAD",
                    createdOn: "2014-09-12T16:21:23Z",
                    updatedBy: "INITIAL-LOAD",
                    updatedOn: "2014-09-12T16:21:23Z",
                    parent: {
                        id: 3193,
                        hierarchyId: "lp",
                        label: "Actions & Verbs",
                        nodeId: "1",
                        createdBy: "INITIAL-LOAD",
                        createdOn: "2014-09-12T16:21:17Z",
                        updatedBy: "INITIAL-LOAD",
                        updatedOn: "2014-09-12T16:21:17Z",
                        parent: {
                            id: 3192,
                            hierarchyId: "lp",
                            label: "root",
                            nodeId: "13190",
                            createdBy: "INITIAL-LOAD",
                            createdOn: "2014-09-12T16:21:14Z",
                            updatedBy: "INITIAL-LOAD",
                            updatedOn: "2014-09-12T16:21:14Z"
                        }
                    }
                },
                parentNodeId: "83",
                createdBy: "INITIAL-LOAD",
                createdOn: "2014-09-12T16:21:23Z",
                updatedBy: "INITIAL-LOAD",
                updatedOn: "2014-09-12T16:21:23Z"
            },
            {
                artifactId: "6450",
                classificationId: 6452,
                id: 3280,
                hierarchyId: "lp",
                label: "Licensee",
                nodeId: "88",
                parent: {
                    id: 3276,
                    hierarchyId: "lp",
                    label: "Authorization",
                    nodeId: "84",
                    createdBy: "INITIAL-LOAD",
                    createdOn: "2014-09-12T16:21:23Z",
                    updatedBy: "INITIAL-LOAD",
                    updatedOn: "2014-09-12T16:21:23Z",
                    parent: {
                        id: 3275,
                        hierarchyId: "lp",
                        label: "Authorize",
                        nodeId: "83",
                        createdBy: "INITIAL-LOAD",
                        createdOn: "2014-09-12T16:21:23Z",
                        updatedBy: "INITIAL-LOAD",
                        updatedOn: "2014-09-12T16:21:23Z",
                        parent: {
                            id: 3193,
                            hierarchyId: "lp",
                            label: "Actions & Verbs",
                            nodeId: "1",
                            createdBy: "INITIAL-LOAD",
                            createdOn: "2014-09-12T16:21:17Z",
                            updatedBy: "INITIAL-LOAD",
                            updatedOn: "2014-09-12T16:21:17Z",
                            parent: {
                                id: 3192,
                                hierarchyId: "lp",
                                label: "root",
                                nodeId: "13190",
                                createdBy: "INITIAL-LOAD",
                                createdOn: "2014-09-12T16:21:14Z",
                                updatedBy: "INITIAL-LOAD",
                                updatedOn: "2014-09-12T16:21:14Z"
                            }
                        }
                    }
                },
                parentNodeId: "84",
                createdBy: "INITIAL-LOAD",
                createdOn: "2014-09-12T16:21:23Z",
                updatedBy: "INITIAL-LOAD",
                updatedOn: "2014-09-12T16:21:23Z"
            }
        ];
    });

    </script>
</body>
</html>


!!!
运输署{
边框：2个点绿色；
填充：4px；
背景色：#aaa；
}
{{label.label}
{{label.parent.label}
{{label.parent.parent.label}
//创建用于在此body.document（body ng app=“MonApp”）中使用angular的对象
var app=angular.module（'MonApp'，[]）；
//创建控制器
应用控制器（'CommentsCtrl'，函数（$scope）{
//创建或获取带有某个名称的json，此处为“注释”
$scope.labels=[
{
artifactId:“6450”，
分类ID:6451，
身份证号码：3276，
等级：“lp”，
标签：“授权”，
诺德：“84”，
家长：{
身份证号码：3275，
等级：“lp”，
标签：“授权”，
诺德：“83”，
createdBy：“初始加载”，
createdOn：“2014-09-12T16:21:23Z”，
更新人：“初始加载”，
更新：“2014-09-12T16:21:23Z”，
家长：{
身份证号码：3193，
等级：“lp”，
标签：“动作和动词”，
nodeId:“1”，
createdBy：“初始加载”，
createdOn：“2014-09-12T16:21:17Z”，
更新人：“初始加载”，
更新：“2014-09-12T16:21:17Z”，
家长：{
身份证号码：3192，
等级：“lp”，
标签：“根”，
诺德：“13190”，
createdBy：“初始加载”，
createdOn：“2014-09-12T16:21:14Z”，
更新人：“初始加载”，
更新：“2014-09-12T16:21:14Z”
}
}
},
parentNodeId:“83”，
createdBy：“初始加载”，
createdOn：“2014-09-12T16:21:23Z”，
更新人：“初始加载”，
更新：“2014-09-12T16:21:23Z”
},
{
artifactId:“6450”，
分类ID:6452，
身份证号码：3280，
等级：“lp”，
标签：“被许可人”，
诺德：“88”，
家长：{
身份证号码：3276，
等级：“lp”，
标签：“授权”，
诺德：“84”，
createdBy：“初始加载”，
createdOn：“2014-09-12T16:21:23Z”，
更新人：“初始加载”，
更新：“2014-09-12T16:21:23Z”，
家长：{
身份证号码：3275，
等级：“lp”，
标签：“授权”，
诺德：“83”，
createdBy：“初始加载”，
createdOn：“2014-09-12T16:21:23Z”，
更新人：“初始加载”，
更新：“2014-09-12T16:21:23Z”，
家长：{
身份证号码：3193，
等级：“lp”，
标签：“动作和动词”，
nodeId:“1”，
createdBy：“初始加载”，
createdOn：“2014-09-12T16:21:17Z”，
更新人：“初始加载”，
更新：“2014-09-12T16:21:17Z”，
家长：{
身份证号码：3192，
等级：“lp”，
标签：“根”，
诺德：“13190”，
createdBy：“初始加载”，
createdOn：“2014-09-12T16:21:14Z”，
更新人：“初始加载”，
更新：“2014-09-12T16:21:14Z”
}
}
}
},
parentNodeId:“84”，
createdBy：“初始加载”，
createdOn：“2014-09-12T16:21:23Z”，
更新人：“初始加载”，
更新：“2014-09-12T16:21:23Z”
}
];
});

这是一个结果：

授权操作和动词

被许可人授权

这正是我想要做的。谢谢