Adding object to JS collection that extends the array (inheritance?)

Question

Note: Yes there are similar questions but I'm having trouble passing the collection into a function.

$j = jQuery.noConflict();

// objects.json shows: {"objects": ["hello", "hi", "yo"]}

function ObjectCollection() {

}

ObjectCollection.prototype = [];


ObjectCollection.prototype.fetch = function() {
 var parent = this;
 $j.getJSON("objects.json", function(data) {
     $j.each(data.objects, function(i, customObject) {
        var myCustomObject = new CustomObject(customObject);
        parent.push(myCustomObject);
     });

     console.log(parent); // array exists

 });
      console.log(parent); // its gone!

};


function CustomObject(name) {
    this.name = name;
}

function doSomethingWithCollection(objectCollection) {
    this.objectCollection = objectCollection;
    this.objectCollection.fetch();
    console.log(this.objectCollection); // shows object collection with object in console
    console.log(this.objectCollection.length); // equals 0?? should be 3!
    this.objectCollection.forEach(function(object) {
        // it wont iterate
        console.log(object);


    });
}
var collection = new ObjectCollection;
// if i uncomment the next two lines, the code will work
// var object = new CustomObject('myName');
// collection.push(object);
doSomethingWithCollection(collection);

Edit... ok, my problem is this: https://jsfiddle.net/qd42fknL/

Please don't suggest plugins. I want to create my own object collector.

What's going on with my code?

I made a fiddle...

If I initiate the collection with an object outside of the function..it will work, so this is an inheritance problem. Whats going on?

You cannot extend arrays like that. [You cannot extend `Array` at all in ES5](http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/). — Bergi, Mar 23 '16 at 15:43
By what you posted you forgot to put a bracket at the end... — amanuel2, Mar 23 '16 at 15:44
I cannot reproduce. Calling `.push()` does set the `.length` to 1 for me. — Bergi, Mar 23 '16 at 15:53
@amlmf1 can you please let me know about `objects.json` ? What's inside that ? — Adnan Umer, Mar 23 '16 at 17:14
There's a comment in the fiddle and in the post... it says "objects.json shows: `{"objects": ["hello", "hi", "yo"]}`" — amlmf1, Mar 23 '16 at 17:49
@amlmf1 please see updated answer http://stackoverflow.com/a/36182865/2509344 and working fiddle here https://jsfiddle.net/qd42fknL/2/ — Adnan Umer, Mar 24 '16 at 05:52

Adnan Umer · Accepted Answer · 2016-03-24T05:51:29.200

EDIT

I realized that issue is not with inheritance at all. Issue here is that you are sending an ajax request and before it actually finishes, you are doing console.log. So, that produces wrong results.

There are two solutions to overcome that.

Use synchronous ajax request (but that is not recommend)
Wait for asynchronous ajax request to finish first.

Here is a working solution using asynchronous ajax calls.

$j = jQuery.noConflict();

function ObjectCollection() { }
ObjectCollection.prototype = [];

ObjectCollection.prototype.fetch = function(callback) {
    var parent = this;
    $j.getJSON("objects.json", function(data) {
        $j.each(data.objects, function(i, customObject) {
            var myCustomObject = new CustomObject(customObject);
            parent.push(myCustomObject);
        });

        callback(); // notify request is completed
   });
};

function CustomObject(name) {
    this.name = name;
}

function doSomethingWithCollection(objectCollection) {
    this.objectCollection = objectCollection;
    var that = this;

    this.objectCollection.fetch(function () {

        // do this only after ajax finishes 
        console.log(that.objectCollection);
        console.log(that.objectCollection.length);
        that.objectCollection.forEach(function(object) {
            console.log(object);
        });
    });
}

var collection = new ObjectCollection;
doSomethingWithCollection(collection);

Here is the fiddle https://jsfiddle.net/qd42fknL/2/

That will work very well for other classes, but not for `Array`. `Array.apply(this, arguments)` does nothing, and `.length` doesn't work. — Bergi, Mar 23 '16 at 15:54
@Bergi coll.length works fine. Please have a look over here https://jsfiddle.net/2j0ef55n/ — Adnan Umer, Mar 23 '16 at 16:01
[not really](https://jsfiddle.net/2j0ef55n/1/). It only has the expected value because you used `push`, but it does not work like you'd expect from an array. — Bergi, Mar 23 '16 at 16:03

Adding object to JS collection that extends the array (inheritance?)

1 Answers1