AngularJS Binding Issue on Complex Object

Question

I have this View Model returned from MVC REST service:

[DataContract]
public class AccountViewModel
{
    [DataMember]
    public IEnumerable<string> Currencies { get; set; }
    [DataMember]
    public IEnumerable<string> FromAccounts { get; set; }
    [DataMember]
    public IEnumerable<string> ToAccounts { get; set; }
}

I have this in angular:

    angular.module('accountServices', ['ngResource'])
        .factory('Accounts', function($resource) {
            return $resource('/SomeUrl/Accounts', {}, {
                get: { method: 'GET' }
            });
        });

    angular.module('staticDataServices', ['accountServices'])
        .service('StaticData', function (Accounts) {

            self.AccountViewModel = Accounts.get();
            self.Reasons = ['Incorrect Alloc',
                            'Unallocated',
                            'Client Withdrawal',
                            'Margin Topup',
                            'Margin Reduction',
                            'Other'];

            return self;
        });

webtraderDeposits.controller('ApprovalDialogController', ['$scope', 'dialog', 'item', 'StaticData', 'Deposits',
    function ($scope, dialog, item, StaticData, Deposits) {
        $scope.AccountViewModel = StaticData.AccountViewModel;
        $scope.Reasons = StaticData.Reasons;
        alert(StaticData.AccountViewModel.Currencies);
    } ]);

StaticData.AccountViewModel is an Object, but StaticData.AccountViewModel.Currencies is undefined. Any ideas on what i am doing wrong?

The webservice returns the following data:

<AccountViewModel xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/WebtraderBackOffice.RESTService.Models">
<Currencies xmlns:d2p1="http://schemas.microsoft.com/2003/10/Serialization/Arrays">
    <d2p1:string>USD</d2p1:string>
</Currencies>
<FromAccounts xmlns:d2p1="http://schemas.microsoft.com/2003/10/Serialization/Arrays">
    <d2p1:string>59500/FUSD</d2p1:string>
</FromAccounts>
<ToAccounts xmlns:d2p1="http://schemas.microsoft.com/2003/10/Serialization/Arrays">
    <d2p1:string>59504/6227905</d2p1:string>
    <d2p1:string>59504/6227925</d2p1:string>
    <d2p1:string>59504/6227951</d2p1:string>
    <d2p1:string>59504/6227958</d2p1:string>
    <d2p1:string>59504/6227959</d2p1:string>
    <d2p1:string>59505/50203040</d2p1:string>
    <d2p1:string>59505/6567866</d2p1:string>
</ToAccounts>

What is the response that your Accounts factory gets from the server? — mcv, May 02 '14 at 09:47
@MohammadSepahvand Even better, it returns XML or JSON depending on the client's "Accept" header! — Steve Klösters, May 02 '14 at 11:58
Accept:application/json, text/plain, */*: so looks like it is returning JSON from the angular client... — c0D3l0g1c, May 02 '14 at 12:06

score 0 · Accepted Answer · edited May 23 '17 at 10:32

That StaticData.AccountViewModel is an object, doesn't have to mean it's the object you expect. Because of the self.AccountViewModel = Accounts.get();, AccountViewModel is pretty much guaranteed to be an object, or at least something, whatever Accounts.get() returns. Accounts.get() should return a promise object containing whatever your Angular app gets from the server, so that's what you need to be looking at.

If your REST service returns XML, then that's clearly the problem. Angular assumes JSON, so XML is not going to be parsed into anything useful to you. Ideally, you should get your webservice to return JSON instead of XML. How to do that, depends on your webservice. With most modern web frameworks it's fairly trivial, but I have no idea what kind of webframework you're using. Share some more information about that if you want an answer to that.

If you don't control the webservice or are otherwise unable to have it send JSON, not all is lost. There are ways to get Angular to parse XML. See for example this question: How to handle XML services in AngularJS? or this blog post: http://rabidgadfly.com/2013/02/angular-and-xml-no-problem/

AngularJS Binding Issue on Complex Object

1 Answers1