如何在 Angularjs 中将 JSON 响应正确解析为 ng-repeat [英] How to Parse JSON response into ng-repeat correctly in Angularjs

问题描述

我希望能够使用 ng-repeat 来解析我在前端的响应.我在使用 ng-repeat 列表解析具有多个项目与单个项目的响应时遇到问题.

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.

我能够解析；但我必须在前端使用单独的 ng-repeat 配置创建 2 个不同的列表，并添加一些丑陋的逻辑，以便在数组长度大于 1 时不显示.

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-repeat 元素，它可以处理两个响应或处理此要求的更好方法.

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.
我想对这两个 JSON 响应使用这个 ng-repeat 设置.

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>

以下是当有多个报告时我从我的网络服务中得到的响应.

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-repeat 解析两个响应.我附上了一个 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-repeat 数据源之前，我会对其进行转换:

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>

这篇关于如何在 Angularjs 中将 JSON 响应正确解析为 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！