REVISION
Special thanks to Shaun Scovill for providing an elegant solution using lodash
// Creating an instance and injecting server object - within the ChartService implementation below
var chart = new Chart(serverChartObject);
// Replacing the Chart factory with the following code to simplify the object constructor creation using the server object and initializing it!
Chart.$inject = [];
function Chart() {
return function(serverChartObject) {
var keys = ['app_id', 'article_id', 'section_id', 'data', 'headline', 'legend', 'source', 'source_url', 'subtitle', 'summary', 'width', 'height'];
_.assign(this, _.pick(serverChartObject, keys));
};
}
DEVELOPER TOOLS
Angular : 1.4.7 RequireJS: 2.12 Laravel 5.1.x Lodash 3.10.1
QUERY:
I'm exploring better approaches to automating hydration and protection of an AngularJS / JavaScript object instance.
SCENARIO
In this scenario, I retrieve a collection of chart objects from Laravel 5.1 backend (or any other backend returning a JSON object). A service module called ChartService is used to parse this data into JavaScript Chart objects.
GOAL
I aim to achieve the following with minimal code:
- Create a Chart object instance
- Hydrate the JS object with server chart data
- Protect the object data properties OR a subset such as article, app_id, section_id and data
INITIAL APPROACH
I initially employed
Object.defineProperty(Chart, 'app_id', { value: 1 });chart.app_id = 3, it overwrites the app_id. On the other hand, Object.freeze(chart) prevents all properties from being altered or modified.
CURRENT STRATEGY
NOTE: Some code has been omitted for brevity, apologies if context was compromised.
define([
'angular',
'lodash'
], function(angular, _) {
'use strict';
ChartService.$inject = ['$http', '$q', '$sce', '$rootScope', 'api', 'Chart'];
function ChartService($http, $q, $sce, $rootScope, api, Chart) {
var chartService = {
charts: [],
// NOTE : call parse from external source
parseCharts: function(items) {
var self = this,
chart,
articleId = null,
sectionId = null;
// NOTE : items are a collection of chart objects from Laravel
if (angular.isDefined(items) && Object.keys(items).length > 0) {
// NOTE: c = chart server object
_.each(items, function(c,k) {
// factory Chart instance
chart = new Chart();
// NOTE : hydrate chart instance with c (server chart object data)
chart = hydrateInstance(c, chart);
// freeze object
Object.freeze(chart);
})
}
}
};
function hydrateInstance(obj, instance) {
for (var prop in obj) {
if (obj.hasOwnProperty(prop) && instance.hasOwnProperty(prop)) {
instance[prop] = obj[prop]
}
}
return instance;
}
return chartService;
}
Chart.$inject = [];
function Chart() {
/**
* Constructor, with class name
*/
function Chart(app_id, article_id, section_id, data, headline, legend, source, source_url, subtitle, summary, width, height) {
var self = this;
self.app_id = app_id;
self.article_id = article_id;
self.section_id = section_id;
self.data = data;
self.headline = headline;
self.legend = legend;
self.source = source;
self.source_url = source_url;
self.subtitle = subtitle;
self.summary = summary;
self.width = width;
self.height = height;
}
// removed rest of object / prototype properties for brevity sake
return Chart;
}
return angular.module('cmo.content.charts', [
])
// remove config for brevity
.factory('Chart', Chart)
.service('ChartService', ChartService);
});