Setting an object array with in an ajax call

Question

I have the following MediaObject object that contains :

a Media object
an array
and a function getMedia()

Within my getMedia function I make an ajax call and on success I want to be able to create a Media object and push that object into my array. However, I am unable to reference my array for some reason , how should I reference it ?

I've tried both : MediaObject.arrayList.push(mediaItem) and this.arrayList.push(mediaItem); Neither work.

    function  MediaObject(){

            function Media(){
              this.id = "";
            }

            this.arrayList = [];

            AmebaObject.prototype.getMedia = function(){
              $.ajax({
                        url: this.rooturl+ this.loginurl,
                        type: 'GET',
                        headers: myheaders,
                        dataType: 'xml',
                        success: function (xml) {    
                             this.xml = xml;
                            $(xml).find("media").each(function(){
                               var mediaItem = new Media();
                               mediaItem.id = $(this).find('id').text();
                               MediaObject.arrayList.push(mediaItem);
                            });

                        },
                        error: function (xhr, textStatus, errorThrown) {
                            console.log("Status code : " + xhr.status);
                            console.log("Error: " + errorThrown);
                        }
                    });
            }

}

Error: Uncaught TypeError: Cannot call method 'push' of undefined

this isn't what you think it is. You should add context: this to your ajax request to remedy that. (this will not solve your problem though) — user400654
– user400654, Commented Mar 4, 2014 at 18:42

user1329482 · Accepted Answer · 2014-03-04 18:36:33Z

1

If you want the arrayList to be part of the MediaObject function, then write

MediaObject.arrayList = [];

If you want to reference arrayList as a member of a MediaObject, then you need to change how you reference it in the success function.

answered Mar 4, 2014 at 18:36

user1329482

5693 silver badges8 bronze badges

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

4 Comments

Fabii Over a year ago

why doesn't this.arrayList suffice?

user400654 Over a year ago

@Fabii because this isn't MediaObject in the success callback. See my comment on your question.

Fabii Over a year ago

I meant when declaring the array, can I not use this.arrayList to declare arrayList as a property of MediaObject ?

user1329482 Over a year ago

Yes, that's how it's done. It's getting to the instance later that's the problem because of how Javascript handles 'this' references in functions. The 'this' in getMedia() isn't necessarily referencing the MediaObject. You're almost better using var instead of this in order to pull it off.

K Lee · Accepted Answer · 2014-03-04 18:51:51Z

1

I might be getting it wrong, but to me, your MediaObject is a constructor, while the way you access MediaObject.arrayList suggests static property. Which is a bit confusing.

As user1329482 suggested, you can use arrayList statically, but then you probably should define it outside of the constructor (otherwise every new instance will reset it).

If, however, you want to use it as an instance property, using this is your only option. In order to use this inside of callback’s scope you have to either define some local variable (commonly var that = this) and access it that way, or bind() your callback.

answered Mar 4, 2014 at 18:51

K Lee

1791 silver badge8 bronze badges

Collectives™ on Stack Overflow

Setting an object array with in an ajax call

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related