Develop Reference

Javascript: Array not shifting, multiple setTimeout functions (JSON)

I'm really stuck on this javascript question!
So I'm making a web page that will be completely animated (so it can be used for display for example in a television). That animation will be configurable by the user (stored in a database).
Right now, I've already made the code to store the configuration and to get the configuration (I do an AJAX call and save the configuration in an array of json objects) and everything is as it should be.
The problem is in the animation in which I go through the array and use setTimeout function to create animations. To iterate through the array I rotate it
(I use array.push(array.shift()) according to the answer here).
The first time the intervalmaster function is used, everything goes according to plan, but when the function is called again I need to rotate the array once more (because of the last animation) and the array just doesn't rotate!
Bellow I've left a portion of the code that I'm using that reproduces the problem I'm getting. I've also added the array jsonanima with some possible values (In reality the array is probably much bigger and with higher values).
I really don't understand what is happening, I've also considered that this could be a problem of the multiple setTimeout functions because I've read somewhere (couldn't find the link, sorry!) that is not really advised to use multiple setTimeout.
If that's the case is there any other way to do this?
Thank you in advance!
EDIT: Thanks to the comment from mplungjan I've realized that if change the console.log(jsonanimate) to console.log(JSON.stringfy(jsonanima)) it outputs the correct values (the json array rotated). This got me even more confused! Why do I need to JSON.stringfy to get the array in the correct order?!
Anyway, can't test this with the full code now as I'm not in the office, tomorrow I'll give more feedback. Thank you mplungjan.
EDIT2: Finally solved my problem! So the thing was the call to the function recursivegroup (recursivegroup(0);), this call was made before I rotated the array, so when restarting the animation the array would still have the incorrect values and every sub-sequential value was wrong.
A special thanks to mplungjan and trincot for the comments that helped me debug this problem.
Bellow I leave the code corrected so anybody with the same problem can check it out.
jsonanima=[{"VD":5,"A":10,"diff":0.25},{"L":7,"IE":8,"diff":0.25}];
function intervalmaster(flag){
function recursivegroup(index)
{
if(index==0)
{
//animateeach(jsonanima,0);
}
setTimeout(function(){
//HERE IT WORKS
jsonanima.push(jsonanima.shift());
console.log(JSON.stringify(jsonanima));
//animateeach(jsonanima,0);
//removed the if statement, since it was irrelevant as mplungjan noted
recursivegroup(index+1);
},(jsonanima[0]['diff'])*60*1000);
}
//Changed this
//recursivegroup(0);
var mastertime=0;
for(var key in jsonanima)
{
mastertime+=(jsonanima[key]['diff']);
}
console.log(mastertime,flag);
console.log(JSON.stringify(jsonanima));
if(flag==true)
{
jsonanima.push(jsonanima.shift());
console.log(JSON.stringify(jsonanima));
}
//changed to here
recursivegroup(0);
masterinterval=setTimeout(function(){intervalmaster(true)},mastertime*60*1000);
}
intervalmaster(false);

nodeJS, MySQL and UTF8

I am trying to write a custom String.Prototype function:
String.prototype.Apos = function () {
var string = this.innerHTML.toString();
return string.replace(/’/g,"'").replace(/“|â€/g,'"');
};
I really just want to write a utf8 string to the browser using javascript, however using decodeURIComponent wont work and so I have just resorted to replacing the apostrophes myself.
So from the examples I've seen I wrote the above function, however it doesnt seem to return anything. When I run the following:
$("span").html(string.Apos);
I don't get a response. I've never written a custom prototype function before so could someone help me out and tell me where Im going wrong?

Do you really need to mess with string.prototype?
You can write a function to do the specific job you want to perform, i.e., replace text.
function replaceQuotes(i, oldHtml) {
return oldHtml.toString().replace(/’/g,"'").replace(/“|â€/g,'"');
}
And then:
$("span").html(replaceQuotes);

How to change an attribute of a javascript prototype object

html base
<html>
<head>
</head>
<body>
<input type="text" class="abc"/>
</body>
</html>
So I have my prototype object
function AnArray(){
this.anArray=[];
}
AnArray.prototype.getAnArray=function(val){
return this.anArray[val];
}
AnArray.prototype.setData=function(index,val){
this.anArray[index].data=val;
}
var objAnArray=new AnArray();
the object ends up looking like this
id: 1, pid: "questions-worth-asking", num: 1, data: null
and I'm trying to change an attribute in it like so
objAnArray.setData(0,$(".abc").eq(0).val());
When I've rune console.log messages using getAnArray() before and after the above line, it returns the same value as it has not been changed.
My question is how do you change attributes of a prototype object?
edit: This link led me down the right path http://www.gpickin.com/index.cfm/blog/websql-when-is-a-javascript-object-not-a-javascript-object

You're missing a lot of information from your post that makes it difficult to debug.
From my understanding the problem is that:
You want your jQuery object's value property to be stored in an array that you wrapped in an object.
You want to store this property with the setData function you wrote.
You want to retrieve that object by using the getAnArray function you wrote.
I don't think this is an issue with prototypes, but with the lack of information given to us, it could be any number of things. I wouldn't be surprised if you came back and said "Oh, it was something else completely."
I've made a fiddle that successfully sets and gets data from the anArray objects that you can use as an example.
Here are some problems you want to look at that will help you debug:
You don't set the anArray[index] object in this snippet. So if we are to take this at face value, the setData function should throw a ReferenceError.
You haven't told us if you're calling the setData function inside an event or right when the page loads. If it's the latter, then according to the html you posted at the top, you won't have any data in the input field yet. You need to call the setData function only when there's data in the field.
You might be calling the jQuery object outside of the $(document).ready(function(){ ... }) call so the value you're obtaining with $(".abc") call is undefined.
Give those a try and hopefully those work.
To make your questions easier to debug going forward:
Write all your experimental code in an isolated environment so that all the confidential content content doesn't have to be removed before posting.
Run your code and make sure it runs as expected.
Show us all of that code so that we know where all the data comes from and how each element interacts with the other elements. For example, we currently don't know how the anArray array is populated so I've had to make assumptions. We also don't know how id, pid, or "questions-worth-asking" comes from so there might be side effects from how those are loaded in.
Write your code using some sort of style guide to make it easier to read. This will also help improve debug time for you and will help prevent errors from silly mistakes that you might make.
Edit:
I know you're calling console.log before and after the setData method. Consider putting console.log inside the setData method as well.
AnArray.prototype.setData = function (index, val) {
console.log("Entering setData with: ", index, val, this.anArray[index]);
this.anArray[index].data = val;
console.log("Exiting setData with: ", this.anArray[index]);
};

It seems to me that the problem isn't in your javascript. You're saying that you ran a console.log before and after your setData call on objAnArray. Perhaps it has something to do with your HTML input element not being updated, or the data not coming through in time.
Like Keane said, we need more info about your set up and logic flow.

JavaScript Strange Array Scope Issue

All source code is available here: Simply view the page source. Half the code is on that page, the other half is in the 'deputyDepot.js' file which is linked in the source and should also be viewable.
Just a few things: this is obviously still a work in progress. I'm pretty disorganized when coding, and I tend to jump around and do a little of this and a little of that. So it's a bit messy. Also the background. We'll just pretend that doesn't exist, okay?
So now, on to the problem! It seems that I'm unable to access arrays in any functions.
Currently, the way I've been testing is by modifying my main function (called weTalkNow(input)). This is located in deputyDepot.js. I set it to return whatever values I'm testing to see what they're set to. These values get printed in my chat box thingy. So I use it like console.log(). Currently it's set to return the length of the user input, but that's completely irrelevant.
_inputArray is populated by taking the user input (a string) and splitting it on spaces. It is declared at the top of the page. This is all fine and dandy.
Where the problem arises is if an array is populated manually.
var x = [ [1,2], [3,4] ];
/* Main Function */
function weTalkNow(){
return x[0][0];
}
That code, as far as I can tell, SHOULD output 1. But it does not. When the code is modified to this, it works fine:
/* Main Function */
function weTalkNow(){
var x = [ [1,2], [3,4] ];
return x[0][0];
}
This isn't very helpful, however. I need a global array, not a local one.
What makes things really weird is that if I decide to declare
var x = [ [1,2], [3,4] ];
on my main page (the one with HTML and stuffs), and then do this
/* Main Function */
function weTalkNow(){
return x[0][0];
}
in the deputyDepot.js file, it works fine. So suddenly if I declare a global array on a different page it works okay.
Please let me know if I can clarify any points in any way. I tried to give all the info I could. Random side tips are welcome too, but I'm mostly just focusing on this.
Again, just so I'm clear: for whatever reason, I CANNOT USE ARRAYS if I populate them manually (I assume this is somehow related to the problem). _inputArray is doing it's job fine, so that array works okay. It's the only global array that does so. But it isn't populated manually, but by the split function. I can't seem to be able to make a global array that is accessible by functions.
EDIT:
Okay, I found the problem! All the code I was writing works fine, like it's supposed to. The problem is that at the very top of my .js file was a broken function. This very first line prevented all the code below it from running, and so my arrays were never being initialized in the first place. For this reason I was unable to access them.
Once I checked the web console I was able to fix everything. I didn't know there was a web console before posting this question.

If your function refers to an array that is declared below the line where the function is called, the array will not be in scope.
myFunc();
function myFunc () {
console.log(ra[0]); // won't work
};
var ra = ["a"];
This will work:
var ra = ["a"];
myFunc();
function myFunc () {
console.log(ra[0]); // will work
};
The other thing to keep in mind is that javascript includes are processed in order also. One more thing: while generally javascript is processed from top to bottom, in other words; a function cannot call or reference variables that are defined on a lower line in your file, there is an exception. The exception is named functions, which you are using.
This won't work.
var funcA = function () {
funcB(); // wont work
};
funcA();
var funcB = function () {
console.log("from funcB");
};
This will work:
funcC(); // works fine
function funcC () {
funcD(); // works fine
}
function funcD () {
console.log("from funcD");
};
These subtle differences may be perceived to represent less than perfect design, but they can work very well.

Is it possible to concatenate a function input to text of another function call?

Firstly appologies for the poor title, not sure how to explain this in one line.
I have this Javascript function (stripped down for the purpose of the question)...
function change_col(zone){
var objects= zone1227.getObjects();
}
I am passing in an integer into the function. Where I have "zone1227", I want that 1227 to be the integer I pass in.
I've tried this;
var zonename = "zone" + zone;
var objects= zonename.getObjects();
but that doesn't work.
Is this possible? The functions do exist for every possible integer passed in, but I was hoping to keep the code compact rather than a long list of if statements with hardcoded function names.

Since zone1227 is apparently a global variable, it can also be written as window.zone1227 or as window['zone1227']. This means that you can achieve what you describe, by writing this:
function change_col(zone){
var objects= window['zone' + zone].getObjects();
}
Nonetheless, I agree with Interrobang's comment above. This is not a good way to accomplish whatever it is that you really want to accomplish. You should not be referring to global variables via strings containing their names.

No, you cannot refer to a variable with the value of a string, nor can you concatenate anything onto a variable name. EDIT: turns out you can. You still shouldn't.
Yes, you can avoid using a long hard-coded if/elseif sequence: use an array.
Then you can say this:
function change_col(arr, i)
{
var objects= arr[i].getObjects();
}
And the call would be something like:
change_col(zone, 1227);