Javascript: How to turn an array of JSON objects back into object type sharing prototypes?

Question

If you have an array of product objects created from JSON, how would you add a prototype method to the product objects so that they all point to the same method? How would you teach JavaScript to recognize all the product objects in an array, are instances of the same class without re-creating them?

If I pulled out an array of JSON products, for example, and I want every product in the array to have a prototype method, how would I add one prototype method to each copy of the product?

At first I thought that I had a Product constructor that takes JSON product data as a parameter and returns a new product with prototypes, etc., which will replace the data transfer from the server. I would think that it would be impractical because you recreate objects. We just want to add features common to all objects.

Is it possible for the $.extend property of an object prototype to be a JSON object so that each JSON object refers to exactly the same functions (not a copy)?

For instance:

 var Products = []; Products[0] = {}; Products[0].ID = 7; Products[0].prototype.GetID = function() { return this.ID; }; Products[1].ID = 8; Products[1].prototype = Products[0].prototype; // ?? 

I know this looks bad, but what if you have jQuery $.extend methods for each prototype of a product object: create an object loaded with prototypes and then $.extend this object on top of existing Product objects? How would you encode this? What are the best features?

Answer 1

So, if I understood everything correctly, this is a more complete example of the KOGI idea:

 // Create a person class function Person( firstName, lastName ) { var aPerson = { firstName: firstName, lastName: lastName } // Adds methods to an object to make it of type "person" aPerson = addPersonMethods( aPerson ); return aPerson; } function addPersonMethods( obj ) { obj.nameFirstLast = personNameFirstLast; obj.nameLastFirst = personNameLastFirst; return obj; } function personNameFirstLast() { return this.firstName + ' ' + this.lastName; } function personNameLastFirst() { return this.lastName + ', ' + this.firstName; } 

So, with this structure, you define the methods that you need to add to the addPersonMethods function. That way, the methods of the object are defined in one place, and you can do something like this:

 // Given a variable "json" with the person json data var personWithNoMethods = JSON.parse( json ); // Use whatever parser you want var person = addPersonMethods( personWithNoMethods ); 

Answer 2

Firstly, you do not change Products[0].prototype , you change Object.prototype , which will put this function in the prototype of all objects, and also make it enumerable in every cycle that touches the object.

Also, this is not the correct way to modify a prototype, but ({}).prototype.something Prototype.something will throw a TypeError since .prototype not defined. You want to install it with ({}).__proto__.something .

If you want this to be a specific instance, you need to create this instance, otherwise it will be an instance of the object.

You probably want something like:

 var Product = function(ID) { if (!this instanceof Product) return new Product(ID); this.ID = ID; return this; }; Product.prototype.GetID = function() { return this.ID; }; 

Then fill the array by calling new Product(7) or any other identifier.

Answer 3

First, one problem is that when you create an object, the prototype methods are bound, so the assignment to the prototype object will not be performed:

 var Products = []; Products[0] = {}; Products[0].prototype.foo = function () { return 'hello' } // *** Products[0].foo(); // call to undefined function 

( *** Actually, the code does not work here because prototype is undefined.)

So, to attach the objects, you need to assign the actual functions to the object:

 Products[0].foo = function () { return 'hello'; }; 

You can create a helper function for this:

 var attachFoo = (function () { // Create a new variable scope, so foo and // bar is not part of the global namespace function foo() { return this.name; } function bar() { return 'hello'; } return function (obj) { obj.foo = foo; obj.bar = bar; return obj; // This line is actually optional, // as the function /modifies/ the current // object rather than creating a new one }; }()); attachFoo(Products[0]); attachFoo(Products[1]); // - OR - Products.forEach(attachFoo); 

This way your obj.foo and obj.bar will refer to the same foo() and bar() .

Answer 4

You can do it...

 function product( ) { this.getId = product_getId; // -- create a new product object } function product_getId( ) { return this.id; } 

Thus, although you will have multiple instances of the product class, they all point to an instance of the function.

Answer 5

You can try to do something like this (without jquery) The main prototype of the object:

 function Product(id){ this.id = id; } Product.prototype.getId() = function(){return this.id;}; var Products = []; Products[0] = new Product(7); Products[1] = new Product(8); Products[2] = new Product(9); alert(Products[2].getId()); 

Answer 6

IMO I found a pretty good answer right here:

Return string from AJAX request for cross-domain access

... Could I serialize my data in the service as a JSON string and then further wrap this in JSONP format? I think when it comes to the client would give a JSON string to a callback function. This is not a bad idea. I think I would also be able to send a string other than JSON, which may allow me to simply use eval in the callback to create new Person objects. I think that this will be a more effective solution both in speed and in memory usage on the client side.