JavaScript - Arrays Of Records Displaying As [object Object]???
Ignore post (if mod, please delete)
Similar TutorialsHi i am confused in one topic and need help, I have a javascript array containing objects like; Object values are ordered as Type, Amount and count. Object 1 => ("A" , 100 ,10) Object 2 => ("C" , 50 ,10) Object 3 => ("A" , 100 ,20) Object 4 => ("B" , 200 ,10) Object 5 => ("A" , 10 ,10) Object 6 => ("B" , 100 ,10) Object 7 => ("C" , 100 ,5) Object 8 => ("C" , 50 ,5) In the end i want to group these objects like ; ("A" , 100,30) (Note : 30 = 20 +10) ("A" , 10,10) ("B" , 200,10) ("B" , 100,10) ("C" , 100,5) ("C" , 50,15) 15 = 10 + 5 How can i do this in javascript, note that the new types will be added to this array ? Hey, I'm wondering how do I go about saving an array object in JSON. I got some help in saving game.money, as you see below in the code. That is something I couldn't figured out on my own even after searching for ages. Now I'm wonder how do I save an array such as game.buildings[0]. It's the same as game.money except it's an array. All inputs are greatly appreciated! Code: function save() { var save = { game: { money: game.money } }; localStorage.setItem("save", JSON.stringify(save)); }; function load() { var GameTwo = JSON.parse(localStorage.getItem("save")); if (typeof GameTwo.game.money !== "undefined") game.money = GameTwo.game.money; document.getElementById("money").innerHTML = game.money; }; Reply With Quote 01-19-2015, 06:13 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Nothing magic about arrays. Use the same code: Code: function saveArray( usingName, anArrayToSave ) { localStorage.setItem( usingName, JSON.stringify(anArrayToSave)); }; function loadArray( nameToLoad ) { return JSON.parse( localStorage.getItem( nameToLoad ) ); } Heck, here's a complete demo: Code: <!DOCTYPE html> <html> <body> <div id="before"></div> <hr/> <div id="after"></div> <hr/> <script type="text/javascript"> function saveArray( usingName, anArrayToSave ) { localStorage.setItem( usingName, JSON.stringify(anArrayToSave)); }; function loadArray( nameToLoad ) { return JSON.parse( localStorage.getItem( nameToLoad ) ); } var foo = loadArray("zamboni"); var div = document.getElementById("before"); if ( foo == null ) { div.innerHTML = "First time"; foo = [ "apples", "bananas", "canteloupe", "dates", "eggplant", "falafel" ]; } else { div.innerHTML = foo.join(","); } foo.sort( function() { return Math.random() < 0.5 ? -1 : 1; } ); div = document.getElementById("after"); div.innerHTML = foo.join(","); saveArray( "zamboni", foo ); </script> </body> </html> Hi, every time I try and alert: [ { number:0, secondnumber:0 }, { number:2, secondnumber:1 }, { number:1, secondnumber:2 } ] it just shows [object object], [object object], [object object]. Why is this and what can I do to make the record be shown as it is above in an alert? Thanks. hi all, I have a simple website with 2 Frames, In top frame I have a button that invokes CGI script and internally that CGI script prints info (text) into the bottom frame. Going further we want to print the output coming from CGI into a textarea object in bottom form. I have a function in my CGI script: But ends up printing multiple textarea objects in lower frame. We want to print each line of text into the same textarea object in lower frame. and at the end display a new button. How can we do this using javascript/CGI? I tried the following but not displaying anything. sub print_message { my($message1, $message2) = @_; my $final_message = $message1 . " " . $message2; print <<END_HTML; <html> <head> <form name="myform"> <table border="0" cellspacing="0" cellpadding="5"> <tr> <td><textarea name="outputtext" rows="10" cols="100"> $final_message </textarea> </td> </tr> </table> </form> <style> <!-- a{font-weight:bold;font-family:arial;text-decoration:underline;font-size:13px;} a:hover{font-weight:bold;font-family:arial;text-decoration:none;font-size:13px;} // --> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <a href="main.html" rel="nofollow" target="bottom"></a> <title>CTS Debug Information</title> <style type="text/css"> img {border: none;} </style> </head> <body> </body> </html> END_HTML I created this function in javascript: <script language="javascript" type="text/javascript"> function addtext() { var newtext = document.myform.outputtext.value; var nextLineTextNode = document.createTextNode(newtext + "\r\n"); var logData = document.getElementById("outputtext"); logData.appendChild(nextLineTextNode); logData.scrollTop = logData.scrollHeight - logData.clientHeight; } </script> But when i implemented in my CGI nothing is printed. Thanks!!! I created a method for displaying an object's properties: Code: renderfunction = false; function showProperty (object, property) { document.write ('<td class="type">' + (typeof object[property]) + '</td>' + '<td class="name">' + property + '</td>'); document.writeln('<td class="value">' + ( (typeof object[property] != 'function') ? object[property] :( (property != 'showProperties') ? ( renderfunction ? object[property]() : ('<span class="self">NOT RENDERED</span>') ) : ('<span class="self">THIS</span>') ) ) + '</td>'); document.writeln('<td class="hasOwnProperty" >' + ( object.hasOwnProperty(property) ? "Local" : "Inherited" ) + '</td>'); if (typeof object[property] == 'function') { document.writeln ('<td class="function">' + object[property] + '</td>'); } else { document.writeln ('<td class="function"> </td>'); } } As long as renderfunction = false, the object is fine coming out of this function. However, if I change renderfunction to true, all my properties become undefined. Why isn't this working as I expect it to? How should I fix it? Thanks in advance, -Brian. I can't get any info from Firebug except that one line, uncaught exception [object Object]. The code fully worked, then I needed to make it dynamically create Sortables from the scriptaculous library based on how many X were in a table in my database, which I've done, and I'm thinking it may be a simple slight parse error of some type, I'm not too good with Javascript, because now my script barely works. I've double checked the script's source code, the PHP variables are exactly what they should be. Code: print<<<HERE Sortable.create('sortlist$box', { tag: 'img', overlap:'horizontal',constraint:false, containment: $list, dropOnEmpty: true, onChange: function(item) { var list = Sortable.options(item).element; if(changeEffect) changeEffect.cancel(); changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" }); }, onDrop: function(item) { var thing=Sortable.options(item).element.identify(); var anchors = document.getElementById(thing).childNodes.length-2; if(anchors > 20){ alert('This box had 20 creatures in it already, your last action has not been saved.'); window.location.reload(); } else{ new Ajax.Request("saveImageOrder.php", { method: "post", parameters: { data: Sortable.serialize("sortlist$box") } }); } } }); HERE; $box++; } ?> }); </script> if you solve this I'll send ya $10 via paypal Hello together! I generate html code with jsp. In that jsp there a several framesets and frames. And yes i know, frames are not really up to date but it's an old program and i have to deal with it now. Anyway, in the top frameset i have an onload attribute like onload="load()". In the function load i want to access the Element.prototype object. But unfortunately typeof Element gives me "undefined". So i looked a little deeper and found that window.toString() gives me "[object]" and not as expected "[object window]" so somehow my window doesn't know that its construcor is Window. window.construcor is "undefined" as well. And i don't have access to the Element object. I really don't know where the error could be. When the page is loaded and i access the same window over the console, then everything is right. But in my function a can't get access to the objects i need. I also don't know what part of the code could be useful to post here, but maybe someone had a similar problem before? i should say that this problem only occurs in IE8. In IE9 it works perfectly. Has anyone any idea?? I'm writing a program that involves a network of interconnected nodes (or simply objects in my example below). It depends on being able to access properties of an object's linked objects (a bit oddly worded, sorry)... Problem is I'm not sure how to properly access those properties... see below please. <script> //This is an example of a problem im having in my own code... //I want to access the name of the object within the links array wintin the object... var objA = {name: "Object A", links: [objB, objC]}; var objB = {name: "Object B", links: [objC, objD, objE]}; var objC = {name: "Object C", links: [objB]}; var objD = {name: "Object D", links: [objE]}; var objE = {name: "Object E", links: [objD]}; //ex: I want to access the name of Object A's first link... console.log(objA.links[0].name); </script> I'm hoping to get "Object B"... But instead I get: TypeError: Result of expression 'objA.links[0]' [undefined] is not an object. Is there another way around this? Any thoughts are appreciated. Hi all, I'm stumped on finding a way in javascript to create an object factory whose instances are also object factories. In short I want something like that below, but no joy ... any clues? Code: function createClass () { return new createClass() function createClass() { return new createInstance () function createInstance () { //Default properties, values and methods which might later be extended } } } var createDoor = createClass(); var door1 = createDoor(); var door2 = createDoor(); var createChair = createClass(); var chair1 = createChair (); var chair2 = createChair (); Hello. Is there any way to get the variable name of an object from inside the object? E.g. PHP Code: function Bla(){ this.write = function(){ document.write(<objectname>); } } obj1 = new Bla(); obj1.write(); //Outputs obj1 Here is my script: PHP Code: function myTimer(seconds, obj){ this.seconds = seconds; this.obj = obj; this.startTimer = function(){ if(this.seconds>0){ this.seconds--; this.obj.innerHTML = this.seconds; this.timer = setTimeout("Timer.start()",1000); } } } Timer = new Timer(10, obj); Timer.startTimer(); Now the problem is that the variable that contains the object must be named "Timer". This way I cannot create new timer objects with different variable names I have tried: this.timer = setTimeout("this.start()",1000); but it doesn't work. That's why it would be good to detect the variable name and instead use something like this: this.timer = setTimeout(varname+".start()",1000); I would rather not have to pass the variable name through a parameter like this: Timer1 = new Timer(10, obj, "Timer1"); Thanks in advance. Quote: menu: function( a, b ) { $( b ).observe( 'click', function( event ) { event.stop(); if( $( a ).visible() ) { $( a ).hide(); $( b ).removeClassName( 'selected' ); document.stopObserving( 'click' ); } else { $( a ).show(); $( b ).addClassName( 'selected' ); document.observe( 'click', function( e ) { if( e.target.id != a && e.target.id != b && !Element.descendantOf( e.target, $( a ) ) ) { $( a ).hide(); $( b ).removeClassName( 'selected' ); document.stopObserving( 'click' ); } }); } }); $$( '#' + b + ' > a' ).each( function( element ) { element.observe( 'click', function( event ) { $( a ).hide(); $( b ).removeClassName( 'selected' ); document.stopObserving( 'click' ); }); }); } This work's perfrect accept when i use it with others on the menu it leaves the other ones open, how do i get it to close the open one when i open a new menu.. Thanks. Hello there! I am completely new to these forums and to programming in general (however, I used to program some games, albeit not very good ones, on a version of BASIC that came with my Playstation 2 about 10 years ago hehe). I have a basic understanding of functions, loops, if/else/switch and an extremely basic understanding of objects/methods. I wanted to consolidate my knowledge by putting it to practical use so I have made a little text adventure game. At the moment it is horrendously non-user-friendly as it has just been me experimenting with functions, if/else statements etc. Anyway, below is my code and I have two specific questions regarding it (but general answers telling me how I could do things more efficiently OR telling me what I should consider studying would be very appreciate also :)). Firstly, I have a little inventory object up top and when the player picks up something in the game I change the inv item to "true" so they can use it later (it seemed logical!). I would really love to know how the user could type in "inv" and for their inventory to be shown back to them. i.e. How could I show only the "true" items of an object? I have tried coding this myself but I really am stumped for an answer. Secondly, you can see in the "north21" function within the "north2" function that I used a series of if/else statements instead of a switch. I would have much prefered to use a switch and then for the case of "go north" have an if/else statement to check if vineclear is true or not (so that they can pass through to the non-existent north3 room). Is this possible? You can use if/else statements within an if/else statement but it seemed when I tried doing that in a switch it didn't like it. I am running this script through an interpreter to play the "game". I understand that JS probably isn't the best for what I am trying to do, it was more just a "see what I can do" exercise more than anything. Thanks in advance for your help and please be nice to me, forums scare me generally :D testgame.txt I have to attach the code in a txt file as for some reason it wasn't displaying properly when I copied and pasted it here. Apologies! Reply With Quote 01-17-2015, 08:26 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts Briefly: Code: // based on this: var inv = { sword: false, shield: false, vines: false }; // try this: function displayInventory( ) { var list = [ ]; for ( var item in inv ) { if ( inv[item] == true ) { list.push( item ); } } if ( list.length == 0 ) { return "You have no items in your inventory"; } return "You have these items in your inventory:<ul><li>" + list.join("</li><li>") + "</ul>"; } My code is designed for display in an HTML page, not for use in clumsy console.log( ) coding. prompt() and alert() and confirm() and document.write() and console.log() should be used ONLY when debugging, not for any real work. But if you must use console.log, then try this, to replace the code in italics: Code: return "You have these items in your inventory: " + list.join(","); I am trying to troubleshoot my javascript function below. Code: <script type="text/javascript"> function txtboxfill(fillobj) { var rChar=String.fromCharCode(13); var myVal = "To: " + this.form.to.value + rChar; myVal = myVal + "From: " + this.form.from.value + rChar; myVal = myVal + "Subj: " + this.form.subj.value + rChar + rChar; myVal = myVal + "Message: "; fillobj.value = myVal; } </script> Then I have a text box input field with an Code: <input type="text" id="tp" name="to" size="34" class="totext" onkeyup="txtboxfill(this.form.msg_area);"> and when I enter text in this field it gives me a 'this.form.to' is null or not an object and does not populate the textarea. BTW, msg_area is the id of my textarea. Thank you. Hi All, (Another Post LOL) Ive been getting alot of help with js recently THANKS! One last thing and i shouldnt be on here for a while How would i go about doing this Code: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="750" height="550" codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"> <param name="movie" value="SWF/helicopter.swf"> <param name="quality" value="high"> <param name="menu" value="false"> </object> into JS using .innerHTML = "Above Stuff"; I always get an error + i dont know how im going wrong with the quotes :S ANY HELP (GOOD STUFF); Thanks In Advance, Jamie. NOM NOM NOM! Greetings, I have a floating object that work find within my page. However, I would like to only show after a button is clicked. Any ideas how to do this. Thanks Code: function globals() { this.states = ""; } now I can: Code: globals.states = .... how to extend first code to be able: Code: globals.states.something = .... ? Hello, below you will find two objects, background and photo1, which I need help cleaning up a bit. This will eventually be imported using Json but for now during development it sits as is in my script. I need help with a couple things: - You will notice the 'val' property is identical in both objects. How can I move this into an outside function that each object can share? I'm having trouble bc I couldn't get 'this' to work outside of its current context. - Second, how can I restructure this so that I can instantiate a new object. So if I wanted to add a new layer I'd like to do something like importLayers.push[new Layer('photo2')] Code: var importLayers = { background: { layerType: 'background', index: 0, layerContent: { content: function() { return $(element).find('#background_Content'); }, width: 850, height: 530, xPos: 0, yPos: -150, skewX: 0, skewY: 0, angle: 0, originX: function() { return (this.sWidth() / 2); }, originY: function() { return (this.sHeight() / 2); }, scaleX: 1, scaleY: 1, sWidth: function() { return this.width * this.scaleX; }, sHeight: function() { return this.height * this.scaleY; }, aspect: 0, opacity: 100, val: function(prop, val) { switch(prop) { case 'width': if(plugin.constrain) this.scaleX = this.scaleY = val / this.width; else this.scaleX = val / this.width; break; case 'height': if(plugin.constrain) this.scaleY = this.scaleX = val / this.height; else this.scaleY = val / this.height; break; case 'angle': this.angle = val; } buildTransformation(this, this.content()); } }, }, photo1: { layerType: 'photo', index: 1, layerContent: { content: function() { return $(element).find('#photo1_Content'); }, width: 1920, height: 1280, xPos: 0, yPos: 0, skewX: 0, skewY: 0, angle: 0, originX: function() { return (this.sWidth() / 2); }, originY: function() { return (this.sHeight() / 2); }, scaleX: .15625, scaleY: .15625, sWidth: function() { return this.width * this.scaleX; }, sHeight: function() { return this.height * this.scaleY; }, aspect: 0, opacity: 100, val: function(prop, val) { switch(prop) { case 'width': if(plugin.constrain) this.scaleX = this.scaleY = val / this.width; else this.scaleX = val / this.width; break; case 'height': if(plugin.constrain) this.scaleY = this.scaleX = val / this.height; else this.scaleY = val / this.height; break; case 'angle': this.angle = val; } buildTransformation(this, this.content()); } }, } } Hey, Say I've got a variable with a load of arrays in it ... Code: questions = [ ["<Question1> Question", "choice1","choice2", "choice3"], ["<Question2> Question", "choice1","choice2", "choice3"], ["<Question3> Question", "choice1","choice2", "choice3"], ["<Question4> Question", "choice1","choice2", "choice3"], ... ["<Question11> Question", "choice1","choice2", "choice3"], ... ] And in a textbox called 'ShowAllQuestions' I want to list all the questions in order (but without showing the choices (answers) along with them). How would i go about doing this? Would I need to sort the arrays first? If so, its tricky because '11' would come before '2' in this case.. I just really needed to know something about the whitespace between nodes in a tree structure. I know that Firefox's, Safari's, Chrome's and Opera's DOM treat the whitespace as a node. I am wondering what nodeType whitespace would return? Thank you all for any help + sugestions. When I run this program is says I have an object error (not found?) in line 2, I went over the program which I copied from a book over and over and not finding anything wrong... Help!!! thanks HTML code he Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Making Sums</title> <script type="text/javascript" src="jsb-08-01.js"></script> <script type="text/javascript" src="jsb-global.js"></script> </head> <body> <h1>Making Sums</h1> <form action="addit.php"> <p><input type="text" id="inputA" name="inputA" value="0" /></p> <p><input type="text" id="inputB" name="inputB" value="0" /></p> <p><input type="button" id="add" name="add" value="Add" /></p> <p><input type="text" id="output" name="output" /></p> </form> </body> </html> Javascript code he Code: // initialize when the page has loaded addEvent(window, 'load', initialize); // Here's where it says I have an error function initialize() { // do this only if the browser can handle DOM methods if(document.getElementById) { // point to critical elements var oInputA = document.getElementById('inputA'); var oInputB = document.getElementById('inputB'); var oButton = document.getElementById('add'); var oOutput = document.getElementById('output'); // if they all exist... if(oInputA && oInputB && oButton && oOutput) { //apply behaviors addEvent(oButton, 'click', addIt); } } } // add two input numbers & display results function addIt() { var value1 = document.getElementById("inputA").value; var value2 = document.getElementById("inputB").value; document.getElementById("output").value = value1 + value2; } |