All geek questions in one place

How to properly handle JSON response in ng-repeat in Angularjs

I want to use ng-repeat to analyze my answer on the front side. I am having trouble processing responses that contain multiple items compared to a single item using the ng-repeat list.

I can make out; but I need to create 2 different lists with a separate ng-repeat configuration on the front panel and add some ugly logic so as not to display if the array is longer than one.

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

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

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

Below is the answer I get from my web service 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" } } } }

I want to be able to parse both answers with the same ng-repeat . I added jsfiddle for more details.

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

+4
source share
1 answer

I would convert what you get from the server before installing it as an ng-repeat data source:

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

And then

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

Source: https://habr.com/ru/post/1493058/

More articles:


All Articles