How to Parse JSON response into ng-repeat correctly in Angularjs

Question

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.

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.

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.

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"
            }
        }
    }
}

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/

Answer 1

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];
    }
});

And then

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