Javascript turning JSON string into instance of function

Question

I have a bunch of JSON string returned from an ajax call in a specific format and when starting to convert them all into my own Javascript object, I start to wonder if there is any easier way since we're talking Javascript here.

I'll have var manyOfThem = [ { name: 'a' }, { name: 'b' }, { name: 'c' } ]; And I'd like to easily associate each of these objects with my functions so that I can do things like:

myClass.prototype.doSomething = function() {
  // do something to this.name
};

$.each(manyOfThem, function(index, item) {
  item.doSomething();
});

I guess my concern is, I would not want to (because its repetitive) do this:

var myClass = function(item) {
  this.name = item.name;
  // do the same for the rest of item's potentially 20 properties
};

var oneOfThem = new myClass(manyOfThem[0]); // I think this is redundant....
oneOfThem.doSomething();

Anyhow, if there is also (security?) reasons why I'd just have to suck it up and do them all manually please share as well, thanks!

I think it depends on what you want to in doSomething. Can you share what your plan is? Like why couldn't you just make a function called doSomething and pass item to it? — Ian
– Ian, Commented Apr 4, 2013 at 2:34
You could always have myClass accept an array (manyOfThem in this case). Then, when you want to manipulate one of its items (calling some doSomething function), you could do myClass.doSomething(3) meaning the 3rd index. Then internally, it would just operate on the 3rd item in the array (without exposing the array). — Ian
– Ian, Commented Apr 4, 2013 at 2:38
@ian Well, it really could be anything, and if doSomething was a function outside anything it would be 1. in the global namespace, 2. counter-object-oriented design — Lim
– Lim, Commented Apr 4, 2013 at 3:02

Yanick Rochon · Accepted Answer · 2013-04-04 03:05:23Z

3

You mean, something like (see jsfiddle) :

var MyClass = function() {};
MyClass.prototype = {
    doSomething: function() {
        alert(this.name);
    }
};

Then

var manyObj = $.map(manyOfThem, function(obj) {
   return $.extend( new MyClass(), obj );
});

So you can call :

manyObj[0].doSomething();  // alert("a")

However, this approach will not preserve a direct copy with the manyOfThem object. (In the example above, changing manyOfThem[0].name = "foo"; will not affect manyObj[0] and a call to manyObj[0].doSomething(); will still alert "a". To preserve a direct reference to your object, do this :

var manyObj = $.map(manyOfThem, function(obj) {
    function F() {};
    F.constructor = MyClass;
    F.prototype = obj;
    $.extend(F.prototype, new MyClass());
    return new F();
});


manyObj[0].doSomething();  // alert("a")

manyOfThem[0].name = "foo";  // modify the referenced object

manyObj[0].doSomething();  // alert("foo") ..also modifies the behaviour of the instance

edited Apr 4, 2013 at 3:05

answered Apr 4, 2013 at 2:47

Yanick Rochon

53.8k30 gold badges146 silver badges231 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lim Over a year ago

Hi, thanks a lot, I think the extend function is the key I am looking for. But for preserving a direct reference to my object, can I confirm with you that the prototype will also contain instance variables such as this.name and can be copied over into F.prototype altogether?

Yanick Rochon Over a year ago

Yes, any function or property that is defined will be copied unto the object. For instance, cloning an object is done using : var clone = $.extend({}, sourceObj);. In this case, F.prototype act as a anonymous class level function constructor to create new prototypes using your manyOfThem objects as templates, then extending them with new instances of MyClass (so they each have individual scopes).

Lim Over a year ago

I'll have to be honest and say I still don't quite get the concept of object instance properties being copied into a prototype but guess whatever the semantics do, that is what it does. Thanks a lot for your answer!

Arun P Johny · Accepted Answer · 2013-04-04 03:03:38Z

2

One solution without using a class is

var manyOfThem = [ { name: 'a' }, { name: 'b' }, { name: 'c' } ];

function doSomething(){
    console.log(this.name)
}

$.each(manyOfThem, function(index, item) {
  doSomething.call(item);
});

Demo: Fiddle

If you want to create an instance of type MyClas then

var manyOfThem = [ { name: 'a' }, { name: 'b' }, { name: 'c' } ];

function MyClass(item){
    $.extend(this, item);
}

MyClass.prototype.doSomething = function(){
    console.log(this.name)
}

$.each(manyOfThem, function(index, item) {
    var obj = new MyClass(item);
    obj.doSomething()
});

Demo: Fiddle

answered Apr 4, 2013 at 3:03

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

r0dney · Accepted Answer · 2013-04-04 02:55:22Z

0

You can do

var myClass = function(item){  
    for( i in item){  
        if (item.hasOwnProperty(i)){
            this[i] = item[i];
        }
    }
};

This should reduce the repetitive assignments in myClass constructor.

answered Apr 4, 2013 at 2:55

r0dney

7452 gold badges6 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript turning JSON string into instance of function

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related