Question

Note: my application is way more complicated but I’m stripping anything that is not required to focus on the core of the problem. That (simplified) application let the user edit data about items, for exemple add a random number of companies to it, each one qualified (manufacturer, distributor, wholesaller, etc).

That item object looks like this:

{   // item
    Name: "name",
    CreationDate: "some date",
    // etc...
    Companies: [{ 
        Type: "Manufacturer",
        Company: {
            ID: "some random id",
            Name: "name of the company"
            // other bunch of stuff
            }
        // other bunch of stuff
        }, { 
        Type: "Distributor",
        Company: {
            ID: "some other random id",
            Name: "name of an other company"
            // other bunch of stuff
            }
        // other bunch of stuff
        }]
    // other bunch of stuff
}

In my angularjs application I have various $resource objects factories (for exemple, Companies, Items). Those factories are injected in controllers (CompaniesController, ItemsController, …) that are responsible for the edition of every object.

Now, when I’m editing an item (that I manually created in the database) I get that item as a resource object (which was expected) and all the item’s companies as an array of object.

I’m also getting with a different call all the available companies as an array of resource objects (also expected).

Note that, the structure of the company object is exactly the same in both cases (as they are, in fact, the same objects).

My problem is that the item’s categories are plain JS objects and in no way linked or mapped to the corresponding angularsjs resources so when I’m trying to edit an existing linked company, angular does not find it. It seems logical as on one hand I have a “basic” js object and on the other hand a $resource object.

The edition on the page is actually made with one free text field for the type of the company, and a dropdown list (select) with all the companies. I first tried using the ng-options on the select, then worked around it with the following :

<select name="ddlc_01" id="ddlc-01"> 
    <option value="">-- Choose --</option>
    <option ng-selected="company.ID == editedCompany.Company.ID" ng-repeat="company in companies" value="{{company.ID}}">{{company.Name}}</option>
</select>

But I’d rather not hack it that way.

So is there a way to “link” or “attach” a js object to a matching $resource object ? Or am I stuck with the hack because the problem does not rely with angularjs but rather with the way the javascript engine compares objects ?

I have tried to take all the item’s companies and replace them with:

var item = Items.get({ verb: $routeParams.ID }, function (result) {
    var newComps = [];
    for (var i = 0; i < item.Companies.length; i++) {
        var ct = item.Companies[i];
        ct.Company = new Companies(ct.Company);
    }
});

but as much as it became a $resource object, it still don’t match the one from the Companies request.

Another option I’ve been considering, but not tried yet, would be to “chain” the requests and, based on the objects ID (a field of my objects), search the matching resources from Companies and replace them with those objects. What I don’t like with that option is that it will increase the loading and building time of the page as there is actually already 4 calls to various methods of the apis to populate everything.

Any thoughts, suggestions or answers to the question appreciated 🙂

Answer 1

OK so I actually did solve it that way :

1. created a counter to get hold of the request currently not answered
2. added a function ‘asyncCallback’ passed to every Object.query()
3. in that method, decrement the counter.
4. if the counter is equal to 0, search the item companies and replace them with their “true” value

It allowed me to avoid the chaining of asynchronous calls while keeping the same level of flexibility (if not higher). Also, if need would arise, it could be easily tranformed to freeze the zones not yet “rebinded” so that the user can’t make a bad choice in the UI.

Because I struggled a bit with it (and the documentation didn’t seemed as crystal clear as I’d wish), here is the select I used:

<select ng-options="c as c.Name for c in companies" ng-model="editedCompany.Company"> 
    <option>-- Choose --</option>
</select>

which means that I’m using c.Name as a representation of the company, but its value is actually the company itself (don’t trust the value, it’s just a fake one to allow angular to handle it).

Feel free to suggest ideas or raise any concerns or mistake I might have overlook, or provide a new answer tho !