My application is quite complex, but for the sake of simplicity, I'm focusing on the core issue here. The application allows users to edit data about items, such as adding multiple companies to each item with different qualifications (manufacturer, distributor, wholesaler, etc).
The structure of an 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 information
}
// more information
}, {
Type: "Distributor",
Company: {
ID: "some other random id",
Name: "name of another company"
// other information
}
// more information
}]
// more information
}
In my AngularJS application, I have various $resource object factories (e.g., Companies, Items) that are injected into controllers (CompaniesController, ItemsController, ...) responsible for editing these objects.
When editing an item created in the database, I retrieve the item as a resource object along with all associated companies as an array of objects. I also fetch all available companies as an array of resource objects.
Both the structure of the company object and the resource object remain consistent across cases.
The challenge arises when trying to link or map plain JS objects representing the categories of an item to corresponding AngularJS resources. Editing linked companies poses difficulty since there's a disconnect between basic JS objects and $resource objects in AngularJS.
The editing interface includes a free-text field for the company type and a dropdown list populated with all available companies. Initially attempted using ng-options for the select, then implemented a workaround utilizing:
<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>
However, seeking a more elegant solution than this hack.
Is there a method to bind a JS object to a matching $resource object? Or must I rely on workarounds due to differences in how AngularJS handles objects compared to regular JavaScript?
I attempted replacing the item's companies 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);
}
});
Despite transforming into a $resource object, it still doesn't align with the Companies request.
Considering another option of chaining requests and searching for matching resources based on object IDs to replace them. Concerned about increased loading time given the current 4 API calls involved in populating the page.
Open to thoughts, suggestions, or solutions to address this question :)