Question

I need to create the following array dynamically, for example:

var data = { point: [
              { x:5, y:8 },
              { x:8, y:10},
              ]};

 console.log(data.point[0].x);   // 5  n=0
 console.log(data.point[1].y);   // 10 n=1

At some point my application needs to expand the array to more than 2 items (n=0, n=1). Please let me know how to do that (i.e. n = 9 ).

Answer 1

You could do something like this:

var data = {'points' : []};

function addPoint(x, y) {
    data.points.push({'x' : x, 'y' : y});
}

function getPoint(index) {
    return data.points[index];
}

addPoint(10, 20);
addPoint(5, 3);

var p = getPoint(1);
alert(p.x + ", " + p.y); //alerts => "5, 3"

This would work for any arbitrary number of points.

Update

To clear the array

function clearPoints() {
    data.points = [];
}

Update 2

These little functions will work okay if you have a simple page. If this points handling is going to end up being part of a larger system, it may be better to do something like this:

var data = {
    'points' : [], 
    addPoint : function(x, y) {
        this.points.push({
            'x' : x, 
            'y' : y
        });
    }, 
    getPoint : function(index) {
        return this.points[index];
    }, 
    clearPoints : function() {
        this.points = [];
    }, 
    removePoint : function(index) {
        this.points.splice(index, 1);
    }
};

Example usage:

alert(data.points.length); // => 0

data.addPoint(1, 2);
data.addPoint(8, 12);
data.addPoint(3, 7);
alert(data.points.length); // => 3

var p = data.getPoint(2); //p = {x:3, y:7};

data.removePoint(1); 
alert(data.points.length); // => 2

data.clearPoints();
alert(data.points.length); // => 0

It may allow you to keep your point handling a little cleaner and easier to use and update.