如何在Angularjs中正确地将JSON响应解析为ng-repeat

发布时间：2020-12-17 17:55:30 所属栏目：安全来源：网络整理

导读：我希望能够使用ng-repeat来解析前端的响应.我无法使用ng-repeat列表解析具有多个项目的响应与单个项目的响应. 我能够解析;但我必须在前端创建2个不同的列表,并在前端添加单独的ng-repeat配置,如果数组的长度大于1,则添加一些丑陋的逻辑以便不显示. 我的目标

我希望能够使用ng-repeat来解析前端的响应.我无法使用ng-repeat列表解析具有多个项目的响应与单个项目的响应.

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

我的目标是在我的部分中只有一个ng-repeat元素,它处理两个响应或更好的方法来处理这个要求.

详细解释和jsfiddle如下.
我想对这两个JSON响应使用这种ng-repeat设置.

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

以下是我在多个报告时从我的网络服务获得的响应.

{
    "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"
            },"$": "Scheduled Candidates with Test Center"
            },"TemplateID": {
                "$": "220"
            }
        },{
            "ReportID": {
                "$": "212"
            },"$": "Survey Report by Test"
            },"TemplateID": {
                "$": "269"
            }
        }]
    }
};

当只有一个报告时,我从我的服务得到这个回复

{
    "Reports": {
        "@xmlns": {
            "$": "http://ws.wso2.org/dataservice"
        },"Report": {
            "ReportID": {
                "$": "212"
            },"VisibleToPartner": {
                "$": "true"
            },"TemplateID": {
                "$": "269"
            }
        }
    }
}

我希望能够使用相同的ng-repeat解析两个响应.我附上了一个jsfiddle以获取更多细节.

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

解决方法

在将其设置为ng-repeat数据源之前,我会转换从服务器获得的内容：

$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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!