如何正确地分析JSON响应到NG-重演Angularjs [英] How to Parse JSON response into ng-repeat correctly in Angularjs

问题描述

我希望能够使用 NG-重复为了解析我的前端响应。我有有多个项目与使用 NG-重复列表中的单个项目故障解析响应。

I want to be able to use ng-repeat in order to parse my response on the front end. I am having trouble parsing responses that have multiple items versus a single item using ng-repeat list.

我能够分析;但我必须在前端创建2个不同的清单，单独的 NG-重复配置和添加一些丑陋的逻辑，如果数组的长度大于一个不显示。

I am able to parse; but I have to create 2 different list with separate ng-repeat configuration on the front end and add some ugly logic to not display if length of array is greater than one.

我的目标是只有一个 NG-重复元素在我的部分，它可以同时处理响应或更好的方法来处理这​​个要求。

My goal is to have only one ng-repeat element in my partial and it handles both responses or a better approach to handle this requirement.

下面详解的jsfiddle。结果
我想用这个NG-重复设置为JSON响应。

Detailed Explanation and jsfiddle below.
I want to use this ng-repeat setup for both JSON responses.

    <ul ng:repeat="report in reportConfigured.Reports">
    <li ng:repeat="reportItem in report">{{reportItem.ReportName.$}}</li>
    </ul>

下面是我从我的web服务得到响应时有多个报告。

Below is the response I get from my webservice when there are multiple reports.

{
    "Reports": {
        "@xmlns": {
            "$": "http:\/\/ws.wso2.org\/dataservice"
        },
            "Report": [{
            "ReportID": {
                "$": "20"
            },
                "ReportName": {
                "@xmlns": {
                    "$": "null"
                },
                    "$": "Examination Results"
            },
                "VisibleToPartner": {
                "$": "false"
            },
                "ReportType": {
                "@xmlns": {
                    "$": "null"
                },
                    "$": "Examination Report"
            },
                "TemplateID": {
                "$": "9"
            }
        }, {
            "ReportID": {
                "$": "163"
            },
                "ReportName": {
                "@xmlns": {
                    "$": "null"
                },
                    "$": "Scheduled Candidates with Test Center"
            },
                "VisibleToPartner": {
                "$": "false"
            },
                "ReportType": {
                "@xmlns": {
                    "$": "null"
                },
                    "$": "Examination Report"
            },
                "TemplateID": {
                "$": "220"
            }
        }, {
            "ReportID": {
                "$": "212"
            },
                "ReportName": {
                "@xmlns": {
                    "$": "null"
                },
                    "$": "Survey Report by Test"
            },
                "VisibleToPartner": {
                "$": "false"
            },
                "ReportType": {
                "@xmlns": {
                    "$": "null"
                },
                    "$": "Examination Report"
            },
                "TemplateID": {
                "$": "269"
            }
        }]
    }
};

我从我的服务这种反应，只有当一个报告

I get this response from my service when there is only one report

 {
    "Reports": {
        "@xmlns": {
            "$": "http:\/\/ws.wso2.org\/dataservice"
        },
        "Report": {
            "ReportID": {
                "$": "212"
            },
            "ReportName": {
                "@xmlns": {
                    "$": "null"
                },
                "$": "Survey Report by Test"
            },
            "VisibleToPartner": {
                "$": "true"
            },
            "ReportType": {
                "@xmlns": {
                    "$": "null"
                },
                "$": "Examination Report"
            },
            "TemplateID": {
                "$": "269"
            }
        }
    }
}

我希望能够用相同的 NG-重复解析两种反应。我附上一个的jsfiddle了解更多详情。

I want to be able to parse both responses with the same ng-repeat. I have attached a jsfiddle for more details.

http://jsfiddle.net/cejohnson/mdec9/1/

推荐答案

我将改变你从服务器得到什么其设置为 NG-重复数据源之前：

I would transform what you get from the server before setting it as the ng-repeat datasource:

$http({...})
.success(function(data){
    if ( angular.isArray(data.Reports.Report) ) {
        $scope.reports = data.Reports.Report;
    }
    else {
        $scope.reports = [data.Reports.Report];
    }
});

然后

<ul ng:repeat="report in reports">
    <li ng:repeat="reportItem in report">{{reportItem.ReportName.$}}</li>
</ul>

这篇关于如何正确地分析JSON响应到NG-重演Angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！