JSON and coupling

Question

I'm not sure if I understand coupling correctly. I've been told that if I move my data out into an external data file (like JSON), it reduces coupling overall. (I agree with this.)

However, if I were to create an object to hold the data contained with the JSON, whose fields map directly to the JSON's structure, wouldn't that still create a tightly coupled link between the object and JSON?

For example:

"images": [{
    "source" : "images/foo.png",
    "size" : "thumbnail",
    "alt" : "Foo"
},
{
    "source" : "images/bar.png",
    "size" : "thumbnail",
    "alt" : "bar"
}]

And then we have some object, part of the application's model:

function FooBarImage (jsonObj) {
    this.source = jsonObj.source;
    this.size = jsonObj.size;
    this.alt = jsonObj.alt;
}

FooBarImage.prototype.doStuff = function () { ... }

Here, the FooBarImage object knows about the internal format of the JSON objects. If the format of the JSON data were to change (e.g. we want to add a new field, or rename an existing one), wouldn't we have to also make changes to the constructor function?

Am I misunderstanding something, or is there another way that decouples the code and the data even further?

Answer 1

You could easily "reflect"/"map" your jsonObject (the literal object resulting from the deserialization of the provided JSON string). You can loop through the object properties and assign them to your instance:

function FooBarImage (jsonObj) {
    Object.keys(jsonObj).forEach(function(prop) {
        this[prop] = jsonObj[prop];
    }
}

FooBarImage.prototype.doStuff = function () { ... }

Sample:

function dirtyMap(fromObj, toObj) {
 Object.keys(fromObj).forEach(function(prop) {
  toObj[prop] = fromObj[prop];
 });
 return toObj; // chain me?
};

function FooBarImage (jsonObj) {
    dirtyMap(jsonObj, this);
};
FooBarImage.prototype.doStuff = function () { 
 console.log(this);
};

var json = `[{
    "source" : "images/foo.png",
    "size" : "thumbnail",
    "alt" : "Foo"
},
{
    "source" : "images/bar.png",
    "size" : "thumbnail",
    "alt" : "bar"
}]`
  , images = JSON.parse(json)
  , instances = images.map(function(img) { return new FooBarImage(img); })
  ;

instances.forEach(function(instance) { instance.doStuff(); });

An other solution (along with others of course), would be to use a factory:

var createFooBarImage = function createFooBarImage(img) {
    var fooBarImage = Object.create(img);
    fooBarImage.doStuff = function () { 
        console.log(this);
    };
    return fooBarImage;
}

Sample:

var json = `[{
 "source" : "images/foo.png",
 "size" : "thumbnail",
 "alt" : "Foo"
},
{
 "source" : "images/bar.png",
 "size" : "thumbnail",
 "alt" : "bar"
}]`
  , createFooBarImage = function createFooBarImage(img) {
  var fooBarImage = Object.create(img);
  fooBarImage.doStuff = function () { 
   console.log(this);
  };
  return fooBarImage;
 }
  , images = JSON.parse(json)
  , instances = images.map(function(img) { return createFooBarImage(img); })
  ;

instances.forEach(function(instance) { instance.doStuff(); });