JavaScript class to populate object

Question

I am trying to populate an object by using a JavaScript class. I am not even sure if I am doing it correctly, I am very new to JavaScript OOP.

var ImagesViewModel = {}; // Global object

function ImagesClass() {

    this.addImage = function (iUrl) {
        ImagesViewModel.push({ "ImageUrl": iUrl }) //<  Error is here
    }

}

var k = new ImagesClass()
k.addImage("http://www.yahoo.com")
k.addImage("http://www.xbox.com")

Basically I need an easy way to populate ImagesViewModel with multiple properties. Do I need to specify properties within ImagesViewModel? Maybe I can do all of this without having to specify a global variable?

I am getting the error

Object has no method PUSH

Please note that the problem has nothing to do with JSON at all. It seems you are confusing JavaScript object literals (constructs of the JavaScript language syntax) with JSON (a language-independent data-exchange format, like XML or CSV). I will edit your question accordingly. See also: There is no such thing as a "JSON object". — Felix Kling
– Felix Kling, Commented Nov 27, 2013 at 5:53

PSL · Accepted Answer · 2013-11-26 23:12:37Z

4

What you want is an array and not an object, push is a method on Array prototype and you are trying to use it on object.

Change:

var ImagesViewModel = {};

To:

var ImagesViewModel = [];

You can do it this way as well so that each instance of ImagesClass has its own set of images.

function ImagesClass() {
    var  _images = [];

    this.addImage = function (iUrl) {
       _images.push({ "ImageUrl": iUrl }) //<  Error is here
    }

    this.getImages = function(){
      return _images;
    }
}

and use it as:

var k = new ImagesClass();
k.addImage("http://www.yahoo.com");
k.addImage("http://www.xbox.com");
var ImagesViewModel = k.getImages(); //You can either set it directly or as a property of object
console.log(ImagesViewModel);

Demo

edited Nov 26, 2013 at 23:12

answered Nov 26, 2013 at 22:56

PSL

124k21 gold badges257 silver badges243 bronze badges

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

2 Comments

highwingers Over a year ago

Got it, in my example above, can i do everything within the CLASS instead of having to declare a global variable?

Jay Huang Over a year ago

@highwingers You can, just move the variable inside the class.

Jay Huang · Accepted Answer · 2013-11-26 22:58:00Z

1

the push method is only for Arrays, here you are trying to push() to an object, which is why it isn't working.

You will need to change var ImagesViewModel = {}; to var ImagesViewModel = [];

answered Nov 26, 2013 at 22:58

Jay Huang

3561 silver badge10 bronze badges

Comments

Ryan · Accepted Answer · 2013-11-26 23:00:39Z

1

From a design perspective, you probably don't want your viewmodel to just be a flat array (even though you declared it as an object, as other posters pointed out).

I'd suggest declaring an array declaration to hold the images inside of your ImagesViewModel object.

var ImagesViewModel = { // ViewModel generic OBJECT
  this.Images = new Array(); // prototype ARRAY object
}; 

function ImagesClass() {    
    this.addImage = function (iUrl) {    
        ImagesViewModel.Images.push({ "ImageUrl": iUrl }) 
    }

}

answered Nov 26, 2013 at 23:00

Ryan

4,6492 gold badges20 silver badges24 bronze badges

Collectives™ on Stack Overflow

JavaScript class to populate object

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related