Why is my array not ordering in the manner in which I push the objects into the Array?

Question

Okay I have a slight problem with a javascript array of objects the array would look something like this:

var myArray = [
           {Month : 1, Count : 1000},
           {Month : 2, Count : 1000},
           {Month : 9, Count : 1000},
           {Month : 10, Count : 1000},
           {Month : 11, Count : 1000},
           {Month : 12, Count : 1000},
     ]; 

The problem I am having is that I am using this array of objects to display data to a graph. For the life of me I have attempted every way that I can think of to reorder this array in the manner that I need. that need being something like this:

________________________________________________
 09       10       11       12        1        2

because the graph is supposed to be showing 6 months of data in reverse order starting with the current month. I have tried several things including this:

   Code Updated Below:

The calling of the method and loading it with an array of objects:

<script>

monthArray = [];
        monthArray.push({"Month" : 1,
            "Count" : 1252});
        monthArray.push({"Month" : 2,
            "Count" : 1252});
        monthArray.push({"Month" : 9,
            "Count" : 1252});
        monthArray.push({"Month" : 10,
            "Count" : 1252});
        monthArray.push({"Month" : 11,
            "Count" : 1252});
        monthArray.push({"Month" : 12,
            "Count" : 1252});

sTest(monthArray);
</script>

which gave me the same result all over again:::

   Updated Below:

Right now I am doing this all in a regular html file for testing purposes. Is there no good way to do this, I would try another way but honestly I don't know of any other ways.

For reference the second part of this code has to remain as it is unless someone knows a better way to load a json object into this form of data, basically it is just a mimicry of what I am doing to convert my json object so I can effectively rename the months and the data before loading them to the d3.js bar chart that I am using.

Thanks in advance.

EDIT:

I have recently tried editing the code to concatenate two arrays and display the concatenated array but still received the same result. Here is the new Code:

<script>
var sTest = function(array) {

    var newArray = [];
    var newArray2 = [];
    var currentMonth = 2;
    var index = -1;

    //loop through the array to grab the index of the current date to set 
    //my starting and ending points for loading the new array
    for (i = 0; i < array.length; i++) {
        document.write(array[i].Month + "<br/>");
        if (array[i].Month === currentMonth) {
            index = i;
        }
    }

    //test the index of the current date
    document.write("The index of the current date is: " + index + "<br/>");

    //test the length just to be sure and avoid out of bounds errors
    document.write("The length of the current array is: " + array.length + "<br/>");

    //Get the data after the current month and load it to the array first
    for (j = index + 1; j < array.length; j++) {
        newArray.push({"Month" : array[j].Month, "Count" : array[j].Count});
    }    

    //get the data up to the current month and load it into the new array last
    for (k = 0; k <= index; k++) {
        newArray2.push({"Month" : array[k].Month, "Count" : array[k].Count});
    }

    var finalArray = newArray.concat(newArray2);

    //test the printout of the new array to examine the results
    for (i = 0; i < finalArray.length; i++) {
        document.write("Month: " + array[i].Month + " Count: " + array[i].Count + "<br/>");
    }

};
</script>

And here is the same result:

1
2
9
10
11
12
The index of the current date is: 1
The length of the current array is: 6

Month: 1 Count: 1252
Month: 2 Count: 1252
Month: 9 Count: 1252
Month: 10 Count: 1252
Month: 11 Count: 1252
Month: 12 Count: 1252

Answer 1

Your problem is right here:

//test the printout of the new array to examine the results
for (i = 0; i < finalArray.length; i++) {
    document.write("Month: " + array[i].Month + " Count: " + array[i].Count + "<br/>");
}

You are looping through finalArray.length but your document.write is using array[i] not newArray[i] — you are looping over the original unmodified array.

Answer 2

If you can change a little bit the array, here is one solution:

1. Add a new parameter in the object called Order.
2. "Fix" the month and assign it to the order (as the current month will be the last one, any month with a higher value is from the previous year, reduce its value by 12).
3. Sort the array by the new Order value.

The code would be like this:

var date = new Date();
var currentMonth = date.getMonth()+1; // months go from 0 to 11, but your code is 1-12

// add the new ordering parameter
for (var x = 0; x < myArray.length; x++) {
    if (myArray[x].Month > currentMonth) {
        myArray[x].Order = myArray[x].Month - 12;
    } else {
        myArray[x].Order = myArray[x].Month;
    }
}

// sort the array using the new Order value
myArray.sort(function compare(a,b) {
              if (a.Order < b.Order)
                 return -1;
              else
                 return 1;
            });

You can see it working here: http://jsfiddle.net/ypp9kc9y/

---

And here a "cleaner" solution that merges all of that into the compare function, and doesn't need additional variables:

// sort the array using the new Order value
myArray.sort(function compare(a,b) {
          var date = new Date();
          var orderA = a.Month > date.getMonth()+1 ? a.Month -12 : a.Month;
          var orderB = b.Month > date.getMonth()+1 ? b.Month -12 : b.Month;
          if (orderA < orderB)
             return -1;
          else
             return 1;
        });

See it working here: http://jsfiddle.net/ypp9kc9y/1/

Answer 3

Check out the properties of the date object in JavaScript. If you use date math, rather than integer math, then 1/15 will come after 12/14.