pushing json arrays in javascript - javascript

I am customizing some jQuery plugin, and I have an error message I can't understand
var totHistory=0;
var positions = new Array();
$('.someclass').each(function(index){
var tmp = $(this).val();
addHistory({id:tmp});
});
function addHistory(obj)
{
/* Gets called on page load for each comment, and on comment submit */
totHistory++;
positions.push(obj.id);
}
At the very first iteration through .someClass, I get this message
Cannot call method 'push' of undefined
Could someone explain why ?

You should either send positions as a parameter or declare it in a scope accesible for addHistory. You should not declare it without the var keyword as that is considered a bad practice.
Try my first suggestion as that one is the only one I can help you with without knowing the structure of your other js code.

Related

Concatenating a value onto the end of an object property?

I'm saving user preferences using localStorage, like this:
choicesObject = { //put values in an object
"measure1" : $("#m1").is(':checked'),
"measure2" : $("#m2").is(':checked'),
"measure3" : $("#m3").is(':checked'),
"measure4" : $("#m4").is(':checked'),
"measure5" : $("#m5").is(':checked'),
"measure6" : $("#m6").is(':checked'),
"measure7" : $("#m7").is(':checked'),
"measure8" : $("#m8").is(':checked')
}
localStorage.setItem("choices", JSON.stringify(choicesObject));
Then I'm getting them back out like this:
retrieveChoices = localStorage.getItem("choices");
choicesObject = JSON.parse(retrieveChoices);
for(var i = 0;i<9 ;i++){
This nex t line is the problem:
ticked = choicesObject.measure+i;
It just doesn't work and I've tried using quotes and square brackets.
element = "#m" + i;
if(ticked==true){
$(element).prop('checked', true);
}
else{
$(element).prop('checked', false);
}
}
}
I want to loop though the measure properties and restore the checkbox elements.
I'm aware that even my object create is inefficient and I could use a for loop for that but I just don't know how to deal with object properties when it comes to looping because I don't get how you can do it without breaking the object.
At least that works and I can get data into and out of objects that get stored in localStorage, but this really simple issue has me stumped.
PS. Would
choicesObject = localStorage.getItem(JSON.parse("choices"));
be a better shorthand? Just thought this now whilst re-reading my question.
Edit: Thanks everyone. I got 3 correct answers so quickly! Amazing. Thanks so much. This site and its members amaze me every day and have revolutionised my coding!
I'm going to choose the correct answer as the one that also gave me the new shorthand for my parsing, but all of you gave me what i needed to know. I'm going to go see if I can answer some noob questions now!
Use
ticked = choicesObject["measure"+i];
EDIT: Your shorthand would not work, use instead:
choicesObject = JSON.parse(localStorage.getItem("choices"));
An object is just like a "dictionary" of values, so you can access a property either by doing myobject.propertyName or myobject["propertyname"]. They are equivalent.
In your case you just have to replace ticked = choicesObject.measure+i; with
ticked = choicesObject["measure"+i];
Also, consider using the var keyword when defining variables, each time you ommit it a new global variable will be created in the window object, that is the case for retrievedChoices and choicesObject. You can confirm this by accessing them via window["choicesObject"] or window.choicesObject or just choicesObject anywhere after that script has run.

Pass in vars to an eval workaround to process a code string from a json object after YUI compression

I need to pass a jQuery object in to a workaround for an eval. The issue is that i need access to a jQuery object that is out side the eval area but i can't see to pass it in. here is what i have.
var jObj = $(selector);
var myCode = "var jObj="+jObj+"; var i="+i+"; "+shape.mouseover.onEnd.replace("\u0027","'");
var myFucn = new Function(myCode);
myFucn();
the oject I'm getting the string out of is
shape.mouseover.onEnd.replace("\u0027","'");
is working and what I'm passing in that string is
open_info(jObj,i)
Which is what i have to fire. The deal is that the code is run thru YUI compressor so the jObj var becomes something else so i need to pass that in. Right now i get an error where it thinks it should have and ending ] which is not right. I is working it seems, just not the jObj var.
EDIT
there are many way to get where i need to be that are close but not quite like
How to pass parameters in eval in an object form?
shape.mouseover.onEnd = "open_info(jObj,i)";
/*
* this is coming in and must be as it is, don't say it's wrong please
* it's not able to be done anyother way!
*/
//lets process the string and pull in the vars
/* BEOFRE YUI COMPRESSOR CHANGES THINGS and works!!!
var jObj = $(selector);
var i = 1;
var myCode = shape.style.events.mouseover.onEnd.replace("\u0027","'");
var myFucn = new Function(myCode);
myFucn();
*/
// AFTER note it can be random as i change code so it fails cause
// var jObj is now var r and var i is now var e
var r = $(selector);
var e = 1;
var p= shape.style.events.mouseover.onEnd.replace("\u0027","'");
var f= new Function(p);
f();
Now it works before the compression.. After is not due to the change. Hope tha tclears it up some
I might be going down the wrong tracks and be confused here..
But isnt this what your trying to do?
Send myFucn the correct object and what ever i is
myFucn($(selector),10);
function myFucn(jObj,i)
{
shape.mouseover.onEnd.replace("\u0027","'");
}
I still don't understand why this question got 2 down votes, but well it's solved and works great. The trick is to do the same manipulation of the dom state. It's really simple once it is placed out.
//so this is what the object is parsed out to from the json string
//since you can't just pass a function stright that way any how
shape.mouseover.onEnd = "open_info(jObj,i)";
//this is what will take that string and process it
//note jObj is what is in the orgain code but it changes to
// var r or something else that is shorter after going thru YUI compressor
// Which is why we can't just use open_info(jObj,i) and it work..
// ie: it's not an issue with scoope but an issues with var names being shortened
(function(){
//this is the trick on passing them so YUI doesn't get them
//use a string and YUI skips it so we directly create the
//needed oject in the window namespace
window['jObj']=jObj; window['i']=i;
var p= shape.mouseover.onEnd;
var f= new Function(p);
f();
})();
That is it.. I put it in a click or hover event so it's kin to an onClick.
/* EXMAPLE OUTPUT AFTER YUI COMPRESSION
//Note after the YUI compressor get ahold of that
//processing code above it'll look like
*/
function(){window.jObj=n,window.i=t;var u=i.mouseover.onEnd,r=new Function(u);r()}();
So the way that works is, I needed to fix the issue of the var jObj being renamed. So I simply made a sting for the name and let the compressed the var name fill the name of the object I need for the processed code string. Don’t know why I didn’t see it before and I would have saved my rep value :-\ .. oh well. May be a way to shorten this but I'm leaving it for now.
Edit
I recant the edit it was working. :) Very well.. Left wondering what any other ways there would be to make it do the same thing.

Jquery - Edit Object Parameters

I have an Object and I'm trying to use jquery to quickly change the parameter values, but the parameters keep coming back null. code brings back the list of parameters but I can't seem to change anything. Even if I put it at it's base of parameters to change everything - it still comes back as null.
Other than that it works, but if u look closely you will see some api error messages in black at the top left. I added a pastebin so you can see what I'm doing.
http://jsfiddle.net/f4qMe/
and below is the javascript I'm running to try and change the objects parameters. The object is called (id) twitchTV.
function test(){
var data = "http://www.twitch.tv/widgets/live_embed_player.swf?channel=day9tv";
var src = "hostname=www.twitch.tv&auto_play=true&start_volume=25&channel=day9tv";
var code = $("#twitchTV").html();
var newcode = $("param", code).attr("value", src).html();
$("#twitchTV").html(newcode);
$("#twitchTV").attr("data", data);
}​
Your problem is probably here:
var code = $("#twitchTV").html();
var newcode = $("param", code).attr("value", src).html();
html() returns a string so code is a string and you're using it as context in newcode which expects an DOM element or jquery object instead.

JSON how find another value at the same index from a value in Javascript Object

A simple question I'm sure, but I can't figure it out.
I have some JSON returned from the server
while ($Row = mysql_fetch_array($params))
{
$jsondata[]= array('adc'=>$Row["adc"],
'adSNU'=>$Row["adSNU"],
'adname'=>$Row["adname"],
'adcl'=>$Row["adcl"],
'adt'=>$Row["adt"]);
};
echo json_encode(array("Ships" => $jsondata));
...which I use on the client side in an ajax call. It should be noted that the JSON is parsed into a globally declared object so to be available later, and that I've assumed that you know that I formated the ajax call properly...
if (ajaxRequest.readyState==4 && ajaxRequest.status==200 || ajaxRequest.status==0)
{
WShipsObject = JSON.parse(ajaxRequest.responseText);
var eeWShips = document.getElementById("eeWShipsContainer");
for (i=0;i<WShipsObject.Ships.length;i++)
{
newElement = WShipsObject.Ships;
newWShip = document.createElement("div");
newWShip.id = newElement[i].adSNU;
newWShip.class = newElement[i].adc;
eeWShips.appendChild(newWShip);
} // end for
}// If
You can see for example here that I've created HTML DIV elements inside a parent div with each new div having an id and a class. You will note also that I haven't used all the data returned in the object...
I use JQuery to handle the click on the object, and here is my problem, what I want to use is the id from the element to return another value, say for example adt value from the JSON at the same index. The trouble is that at the click event I no longer know the index because it is way after the element was created. ie I'm no longer in the forloop.
So how do I do this?
Here's what I tried, but I think I'm up the wrong tree... the .inArray() returns minus 1 in both test cases. Remember the object is globally available...
$(".wShip").click(function(){
var test1 = $.inArray(this.id, newElement.test);
var test2 = $.inArray(this.id, WShipsObject);
//alert(test1+"\n"+test2+"\n"+this.id);
});
For one you can simply use the ID attribute of the DIV to store a unique string, in your case it could be the index.
We do similar things in Google Closure / Javascript and if you wire up the event in the loop that you are creating the DIV in you can pass in a reference to the "current" object.
The later is the better / cleaner solution.
$(".wShip").click(function(){
var id = $(this).id;
var result;
WShipsObject.Ships.each(function(data) {
if(data.adSNU == id) {
result = data;
}
});
console.log(result);
}
I could not find a way of finding the index as asked, but I created a variation on the answer by Devraj.
In the solution I created a custom attribute called key into which I stored the index.
newWShip.key = i;
Later when I need the index back again I can use this.key inside the JQuery .click()method:
var key = this.key;
var adt = WShipsObject.Ships[key].adt;
You could argue that in fact I could store all the data into custom attributes, but I would argue that that would be unnecessary duplication of memory.

JQuery / Smarty: variable within .keyUp is undefined

So basically, I'm creating variables within the keyUp method of input box that get their data from a smarty loop (this is within the $(document.ready)
Here is the code
{section name=unitEl loop=$allNavies}
$("#attack-navy{$allNavies[unitEl].ID}-number").keyup(function(){
var unit = {$allNavies[unitEl]};
var element = $("#attack-navy" + unit.ID + "-number");
var available_count = {$NAVY_{$allNavies[unitEl].ID}_AVAILABLE_COUNT|default:'0'};
alert(unit.ID);
// Unit max = available count
if(element.val() > available_count)
{
completeUnitValue(element, available_count);
}
// If transport navy: Increase capacity
if({$allNavies[unitEl].ID} == 16 || {$allNavies[unitEl].ID} == 19 || {$allNavies[unitEl].ID} == 20)
{
$("#attack-max-capacity").text(getMaxCapacity());
}
});
{/section}
The problem is, when I alert any of the variables (unit, element, available_count) I receive undefined, but when i use the smarty {$allNavies[unitEl]} instead of variables, everything works fine. I just created variables to make the code more readable.
Anyone know why?
I call what you're doing "smarvascript". I loathe it and beg my coworkers to avoid it. But then, I loathe Smarty altogether, so there ya go.
This line:
var unit = {$allNavies[unitEl]};
assigns some PHP value into a JS var.
This line:
alert(unit.ID);
makes it look like you believe 'unit' is an object with properties. You cannot directly assign a PHP object into a JS object and expect it to work...
I'd need to see some of your PHP code and data structures to explain how you should do it, but it is possible that this might help
var unit = {$allNavies[unitEl]|json_encode};
Or, if $allNavies[unitEl] is an array:
var unit = {$allNavies[unitEl]|#json_encode};
I could probably help most if I knew what the structure of $allNavies was.
Also, I am curious...where are your {literal} markings to keep the JS curly braces from making Smarty freak out?
Edit:
Here is a little trick I like to use when I am forced into injecting Smarty into JS:
//{literal}
( function( allNavies )
{
/*
allNavies is now a JS object and you can work purely with JS in here
*/
}(
//{/literal}
{$allNavies|#json_encode}
//{literal}
) );
//{/literal}

Categories

Resources