Menu
The following is an exercise to see if I understand the concepts of an associative array using javascript. I seem to be able to understand what is happening in about 50% of the script.
I am interested in why I get the displays on separate lines when I click on some of the buttons, but not when I click some others. I’m unclear from where the extra fields are comming from.
Please take a look at the code and displays to see if you can explain what is happening with this script.
[code=php]
<html>
<head>
<title>Array Test</title>
<script type=”text/javascript”>
var HArr = new Array(); // create ‘hash’ (associative) array
function putHArr(key,info) { // save ‘info’ at ‘key’ array position
if (HArr[key] == undefined) { HArr.push(key); } // if not already defined, create element position
HArr[key] = info; // save ‘info at ‘key array position
}
function getHArr(key) { // get ‘info’ at ‘key position
return HArr[key];
}
function SetupHArr() {
Data = new Array();
Data[0] = ‘Boop, Betty,King World’;
Data[1] = ‘Mouse,Mickey,Disney’;
Data[2] = ‘Bunny,Bugs,Warner Bros.’;
Data[3] = ‘Fudd,Elmer,Warner Bros.’;
Data[4] = ‘Duck,Donald,Disney’;
Data[5] = ‘Dog,Goofy,Disney’;
Data[6] = ‘Cat,Tom,MGM’;
Data[7] = ‘Mouse,Jerry,MGM’;
var str = ”;
for (i=0; i<Data.length; i++) {
var info = Data[i].split(‘,’);
var key = info.shift();
putHArr(key,info.join(‘|’)); str += i+’=’+key+’|’+info.join(‘|’)+'<br />’;
}
Display(‘Setup created:<br />’+str);
}
function showHArr1() {
var str = ‘HArr contents<br />’;
for (var i=0; i<HArr.length; i++) { str += i+’=’+HArr[i]+’|’+getHArr(HArr[i])+'<br />’; }
Display(str); // display is as expected
// Displays with one record per line
// creates: 0=Boop:Betty,King World
// : 1=Mouse:Jerry,MGM // note: Mouse,Mickey replaced by Mouse,Jerry [expected]
// … : 6=Cat:Tom,MGM // and hash array is less than Setup array (Data below)
}
// previous 2 functions work as expected but
// next 2 functions don’t display results as expected ???
function showHArrKeys() { // display current ‘keys’ in HArr
var str = ‘HArr keys<br />’;
for (var key in HArr) { str += key+'<br />’; } // create string of ‘keys’ from HArr
Display(str);
// creates: 0 Boop 1 Mouse 2 Bunny … 6 Cat
// don’t know where numbers (0..6) are comming from ???
// and don’t know where RETURNs come from after 0..6 display ???
}
function showHArr2() {
var str = ‘HArr contents<br />’;
var i = 0;
for (var key in HArr) { str += i+’=’+key+’:’+getHArr(key)+'<br />’; i++; }
Display(str);
// display is NOT as expected
// causes RETURNs after key AND record ???
// and displays elements of 0..13 ???
}
// following 2 function work correctly as expected
function ShowRec() {
var key=document.getElementById(‘HArrKey’).value;
Display(key +’|’+ getHArr(key));
}
function Display(str) {
document.getElementById(‘contents’).innerHTML = str;
}
</script>
</head>
<body>
<table border=’0′>
<tr><td>
<button onClick=”SetupHArr()”>Setup Hash array (OK!)</button>
</td><td>
<button onClick=”showHArrKeys()”>Show Keys of Hash(???)</button>
</td></tr>
<tr><td>
<button onClick=”showHArr1()”>Show Hash array (OK!)</button>
</td><td>
<button onClick=”showHArr2()”>Alt. Hash display (???)</button>
</td></tr>
</table>
<br />
Key <input type=”text” id=’HArrKey’ value=”” />
<button onClick=”ShowRec()”>Get</button>
<p /><div id=”contents”></div>
</body>
</html>
I would like to understand the difference between the button displays. ?
The top left buttons appear to display as expected but
the top right buttons display extra fields or line breaks.
Thank you for any thoughts.