JS function return an array containing objects

Question

I ran into the following problem. For a project I get multiple cartesian coordinates (XYZ) which I process in a function. I try to get the function to return an array containing the seperate XYZ coordinates which are saved in an object (function Coord(X, Y, Z) in the example below.

var test = Vertices();

var strTemp = "0 => X=" + test[0].X + " Y=" + test[0].Y + " Z=" + test[0].Z + "\n" +
              "1 => X=" + test[1].X + " Y=" + test[1].Y + " Z=" + test[1].Z + "\n" +
              "2 => X=" + test[2].X + " Y=" + test[2].Y + " Z=" + test[2].Z + "\n" +
              "3 => X=" + test[3].X + " Y=" + test[3].Y + " Z=" + test[3].Z + "\n" +
              "4 => X=" + test[4].X + " Y=" + test[4].Y + " Z=" + test[4].Z;
alert(strTemp);

// ************************* BELOW ARE THE FUNCTIONS ******************************************

function Coord(X, Y, Z) {
       /// <summary>
       /// Class that represents a cartesian coordinate
       /// </summary>
       /// <param name="X">X value</param>
       /// <param name="Y">Y value</param>
       /// <param name="Z">Z value</param>
    this.X = X;
    this.Y = Y;
    this.Z = Z;
};


function Vertices() {
       /// <summary>
    /// Function that collects the locations of all the selected vertices
    /// NOTE: This is a stripped down version of the original function
       /// in order to keep it readable.
       /// </summary>
    /// <returns type="">an array containing cartesian coordinates</returns>

    // create an instance of the Coord class for holding the cartesian coordinates
    var location = new Coord("", "", "");

    // initialize the array which will contain the locations
    var Result = [];

    // declarations of the index vars. There are two of them because of some logic I removed from this example ;)
    var j = 0;  // used as index for the array
    var i = 0;  // used as index for the loop


    // loop thru the selected vertices
    do {

        // fill the location object with the cartesian coordinates (currently represented as random values between 0 and 100)
        location.X = randomIntFromInterval(0, 100);
        location.Y = randomIntFromInterval(0, 100);
        location.Z = randomIntFromInterval(0, 100);

        // add the location object to the array
        Result.push(location);

        // confirm that the values are in the array
        alert(j + "/" + Result.length + "  X = " + Result[j].X + "  Y = " + Result[j].Y + "  Y = " + Result[j].Z);

        // increment the indices
        j++;
        i++;

    } while (i < 10);

    
    // return the array to the main program
    return Result;

}



function randomIntFromInterval(min, max) {
       /// <summary>
       /// generate random integers between a min and max value
       /// </summary>
       /// <param name="min">lowest possible value</param>
       /// <param name="max">highest possible value</param>
       /// <returns type="">integer</returns>
    //http://stackoverflow.com/questions/4959975/generate-random-value-between-two-numbers-in-javascript
    return Math.floor(Math.random() * (max - min + 1) + min);
}

In this example I have a function called "Vertices()" which for this example generates some random coordinates and saves them in the location object (based on Coord(XYZ)). The location object is then added to the array. And the array is returned to the main program.

The alert inside "Vertices" show the correct values but if I try to use the values in the main program (see strTemp) all values are the one last added to the array.

I hope someone can shed some light on this...

score 0 · Accepted Answer · answered Feb 24 '15 at 08:18

0

It is because the

var location = new Coord("", "", "");

is not inside the loop, therefore, you keep the same reference of the object and update all indexes

answered Feb 24 '15 at 08:18

Marc

71
3

score 0 · Answer 2 · answered Feb 24 '15 at 08:21

The problem is in the Verices function. You create a single instance of Coords outside of the loop and inside loop you just modify it and push to array. As the result your Result array contains 10 links to the same single object.

In order to fix this situation you should create new instance of Coords in every loop iteration:

var location;
do {
    location = new Coords("", "", "")
    // fill the location object with the cartesian coordinates (currently represented as random values between 0 and 100)
    location.X = randomIntFromInterval(0, 100);
    location.Y = randomIntFromInterval(0, 100);
    location.Z = randomIntFromInterval(0, 100);

    // add the location object to the array
    Result.push(location);

    // confirm that the values are in the array
    alert(j + "/" + Result.length + "  X = " + Result[j].X + "  Y = " + Result[j].Y + "  Y = " + Result[j].Z);

    // increment the indices
    j++;
    i++;

} while (i < 10);

score 0 · Answer 3 · answered Feb 24 '15 at 08:37

Replace

location = new Coords("", "", "")
// fill the location object with the cartesian coordinates (currently represented as random values between 0 and 100)
location.X = randomIntFromInterval(0, 100);
location.Y = randomIntFromInterval(0, 100);
location.Z = randomIntFromInterval(0, 100);

// add the location object to the array
Result.push(location);

with:

Result.push(new Coords(randomIntFromInterval(0, 100), randomIntFromInterval(0, 100), randomIntFromInterval(0, 100)));

This way, you will push new instance with new random values.

one liner are handy but trickier to debug, may not suit beginners :) — Marc, Feb 24 '15 at 09:04

JS function return an array containing objects

3 Answers3