使用angularjs通过json循环

时间:2017-06-21 07:15:45

标签: html angularjs json

我有一个复杂的JSON对象,我必须循环它并在表单中呈现数据。为此我创建了一个这样的小服务:

service.myApprovalResults = function(){
        var url = "../data/myapprovals.json";
        return $http.post(url).success(function(response) {
         $rootScope.names = response;
        });
    };

以下是我的JSON文件:

{
    "result": [
        {
                    "Approval": {
                        "Id":"111",        // Unique Id
                        "Api":"api/sometihgn/111"
                     },
                    "Ticket":{
                    "Id":"TKT1000011",
                    "API":"api/ticket/TKT1000011"
                    },
                    "TicketItem":{
                    "Id":"RITM1000011",
                    "API":"api/ticket_item/RITM1000011"
                    },
                    "ProcessStep":"",
                    "Description":"Need Approval For sdsadas",  // See Note Section
                    "VariablesSet":// See Note Section
                        [         // VariableSet details.
                            { 
                                "Question":"Joining Date",
                                "Name": "joining_date",
                                "Id":"13",
                                "Value": ["12:12:2014"],
                                "DisplayValue":[""],
                                "Reference":""
                            },
                            {
                                "Question":"Reporting Manager",
                                "Name": "reporting_manager",
                                "Id":"14",
                                "Value": ["samd"],
                                "DisplayValue":["/Sam Doni"],
                                "Reference":"/api/user"
                            },
                            {
                                "Question":"Department",
                                "Name": "department",
                                "Id":"15",
                                "Value": ["IT Security"],
                                "DisplayValue":[""],
                                "Reference":""
                            },

                            {
                                "Question":"Accessories Needed?",
                                "Name": "accessories",
                                "Id":"16",
                                "Value": ["laptop","mouse"],
                                "DisplayValue":[""],
                                "Reference":""
                            }
                        ],                             
                    "ApprovalFor": {   
                        "Name": "Sam Doni",
                        "UserName": "samd",
                        "Email":"samd@test.com",
                        "Api": "api/user/samd" // Api can be used to get more details
                     },
                    "Approver":{    // Optional
                        "Name": "sdsdsdsad",
                        "UserName": "sdsdsad",
                        "Email":"sadsads@dssdf.com",
                        "Api": "api/user/dssds" // Api can be used to get more details
                     },
                    "State": "Requested",
                    "Group": "",// Optional
                    "CreatedBy": {
                        "Name": "sadsdsddsa",
                        "UserName": "sdsd",
                        "Email": "sdsad@test.com",
                        "Api": "api/user/sadsadsa"
                    },
                    "CreatedOn": "2016-11-09T17:29:01Z",
                    "UpdatedOn": "2016-11-09T17:29:01Z",
                    "CommentsSet": [{
                            "Id": "10",
                            "TicketItem": "RITM1001011",
                            "Type": "approvalnote",
                            "Value": "User has issues related to access",
                            "CreatedOn": "2016-11-09T17:29:01Z",
                            "CreatedBy": {
                                "Name": "sdsdsadsadd",
                                "UserName": "dsdsad",
                                "Email":"sdsad@test.com",
                                "Api": "api/user/ssddsad"
                            }
                        },
                        {
                            "Id": "11",
                            "TicketItem": "RITM1001011",
                            "Type": "approvalnote",
                            "Value": "Issue is solved",
                            "CreatedOn": "2016-11-08T17:29:01Z",
                            "CreatedBy": {
                                "Name": "dsadsdsad
                                "UserName": "sdsadas",
                                "Email":"dsads@test.com",
                                "Api": "api/user/sadsadsadsa"
                            }
                        }
                    ]
                 },
                {
                    "Approval": {
                        "Id":"112",     
                        "Api":"api/approval/112"
                     },
                    "Ticket":{
                    "Id":"TKT1000013",
                    "API":"api/ticket/TKT1000013"
                    },
                    "TicketItem":{
                    "Id":"RITM1000021",
                    "API":"api/ticket_item/RITM1000021"
                    },
                    "ProcessStep":"",
                    "Description":"Add user to Helpnow Group",// See Note Section
                    "VariablesSet":// See Note Section
                        [
                            { 
                                "Question":"Location Service Needed",
                                "Name": "location",
                                "Id":"16",
                                "Value": ["11"],
                                "Reference":"/api/location";
                            },
                            {
                                "Question":"What is the issue",
                                "Name": "service_needed",
                                "Id":"18",
                                "Value": ["aloha"]
                                "DisplayValue":[""],
                                "Reference":""
                            }
                        ],                     
                    "ApprovalFor": {   
                        "Name": "dsfdsfdsf",
                        "UserName": "dfdsf
                        "Email":"dfdsfds@gmail.com",
                        "Api": "api/user/rsds// Api can be used to get more details
                     },
                    "Approver":"",
                    "State": "Requested",
                    "Group": {
                             "Name": "FIN Group",
                             "Id":"10"
                            "Api": "api/group/10"// Unique Group ID in SAP
                        }

             }
     ]
}

使用这个JSON我需要遍历并在表单中显示JSON数据。我在下面添加了以下代码:

<ul>
        <li ng-repeat="x in names">
            {{ x.result.Approval.Id }}, {{ x.result.Ticket.Id }}, {{x.result.TicketItem.Id}}, {{x.result.Description}}
        </li>
    </ul>

完成上述事情,但我无法在表格中看到数据。

我检查了chrome开发人员工具,JSON正在正确加载。 有人可以建议我吗?

2 个答案:

答案 0 :(得分:0)

您错误地迭代了数据。我相信你想在你的阵列中显示细节。

您需要将x in names更改为x in names.result。然后,将表达式更改为直接使用x,如下所示:

{{ x.Approval.Id }}, {{ x.Ticket.Id }}, {{x.TicketItem.Id}}, {{x.Description}}

答案 1 :(得分:0)

首先,在声明时检查是否已将$rootScope.names指定为空数组。如果是这种情况,请尝试直接声明并尽可能在服务中分配(以避免数据结构进一步复杂化)。

根据您的JSON结构,您的代码应该是:

<ul>
 <li ng-repeat="x in names.result">
  {{ x.Approval.Id }}, {{ x.Ticket.Id }}, {{x.TicketItem.Id}}, {{x.Description}}
 </li>
</ul>

此外,为了避免这种复杂程度,请尝试重新构建您下次的JSON和响应存储:)