Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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/

share|improve this question
up vote 8 down vote accepted

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.