Printing out contents of an Array?

@ChrisR23Feb 26.2006

I have this array:

var lists = new Array(
new Array(“Dictionaries”, “Oxford English Dictionary”, “http://www.oed.com“),
new Array(“Dictionaries”, “Dictionary.com”, “www.dictionary.com”),
new Array(“Dictionaries”, “Webopedia”, “www.webopedia.com”),
new Array(“News”, “BBC”, “www.bbc.co.uk”),
new Array(“News”, “CNN”, “www.cnn.com”),
new Array(“Shopping”, “Amazon”, “www.amazon.co.uk”),
new Array(“Shopping”, “eBuyer”, “www.ebuyer.com”),
new Array(“Shopping”, “Scan”, “Computers www.scan.co.uk”),
new Array(“Shopping”, “Play”, “www.play.com”),
new Array(“Shopping”, “eBay”, “www.ebay.co.uk”)
);

I would like to print it out like this:

~~[B]~~Dictionaries[/B]
Oxford English Dictionary
Dictionary.com
Webopedia
~~[B]~~News[/B]
BBC
CNN
~~[B]~~Shopping[/B]
Amazon
eBuyer
Scan Computers
Play
eBay

I would then like to add a function that makes the menu expand and collapse when you click on e.g “Dictionaries” the children of “Dictionaries” is shown.

Help would this would be much appreciated!
Thanks
Chris

to post a comment

JavaScript

7 Comments(s) _↴

@phpnoviceFeb 26.2006 — #

[code=html]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Language" content="en-us">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Dynamic List</title>
 <script type="text/javascript">
 <!--//
 var cat = 0, txt = 1, lnk = 2;
 var lists = new Array( 
 new Array("Dictionaries", "Oxford English Dictionary", "www.oed.com"), 
 new Array("Dictionaries", "Dictionary.com", "www.dictionary.com"), 
 new Array("Dictionaries", "Webopedia", "www.webopedia.com"), 
 new Array("News", "BBC", "www.bbc.co.uk"), 
 new Array("News", "CNN", "www.cnn.com"), 
 new Array("Shopping", "Amazon", "www.amazon.co.uk"), 
 new Array("Shopping", "eBuyer", "www.ebuyer.com"), 
 new Array("Shopping", "Scan Computers", "www.scan.co.uk"), 
 new Array("Shopping", "Play", "www.play.com"), 
 new Array("Shopping", "eBay", "www.ebay.co.uk") 
 );
 var menus = new Array();
 //
 function toggleDisplay(obj) {
 if (obj.style.display == "none") {
 setAllMenus("none");
 obj.style.display = "block";
 } else {
 obj.style.display = "none";
 }
 return true;
 }
 function setAllMenus(opt) {
 var x, len = menus.length;
 for (x=0; x<len; ++x) {
 document.getElementById(menus[x]).style.display = opt;
 }
 }
 //-->
 </script>
 </head>
 
 <body>
 
 <p><button type="button" onclick="
 if (this.firstChild.data == 'Open All Menus') {
 setAllMenus('block');
 this.firstChild.data = 'Close All Menus';
 } else {
 setAllMenus('none');
 this.firstChild.data = 'Open All Menus';
 }
 return true;">Open All Menus</button></p>
 
 <script type="text/javascript">
 <!--//
 var curr = null;
 var cnt = -1;
 var x, len = lists.length;
 var str = '<ul id="menu">n';
 for (x=0; x<len; ++x) {
 if (lists[x][cat] != curr) {
 if (curr) str += '</ul>n</li>n';
 cnt++;
 str += '<li onclick="return toggleDisplay(this.getElementsByTagName('UL')[0])">' + lists[x][cat] + 'n';
 str += '<ul id="menu' + cnt + '" style="display:none;">n';
 menus[menus.length] = "menu" + cnt;
 curr = lists[x][cat];
 }
 str += '<li><a href="http://' + lists[x][lnk] + '">' + lists[x][txt] + '</a></li>n';
 }
 if (curr) str += '</ul>n</li>n';
 str += '</ul>';
 document.writeln(str);
 //-->
 </script>
 
 </body>
 </html>
 [/code]

@ChrisR23authorFeb 26.2006 — #Thanks so much! You are a legend!

I spent all of today trying to get that to work and you can just produce it at a drop of the hat like that. I am amazed.

@phpnoviceFeb 26.2006 — #26+ years of programming experience -- 6+ with JavaScript -- ought to be worth something, eh? ?

Rate this thread -- at top of thread.

@ChrisR23authorFeb 26.2006 — #May I ask what editor you use Phpnovice? I have just discovered NetBeans 5.0 which is great for the Beans I am working on but have been using DreamWeaver in tandom for the JavaScript stuff you helped me out with. Is this the way to do things?

@vwphillipsFeb 26.2006 — #done it now so a DOM solution

[CODE]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 <!--
 
 var lists = new Array(
 ['Dictionaries', 'Oxford English Dictionary', 'http://www.oed.com'],
 ['Dictionaries', 'Dictionary.com', 'www.dictionary.com'],
 ['Dictionaries', 'Webopedia', 'www.webopedia.com'],
 ['News', 'BBC', 'www.bbc.co.uk'],
 ['News', 'CNN', 'www.cnn.com'],
 ['Shopping', 'Amazon', 'www.amazon.co.uk'],
 ['Shopping', 'eBuyer', 'www.ebuyer.com'],
 ['Shopping', 'Scan', 'Computers www.scan.co.uk'],
 ['Shopping', 'Play', 'www.play.com'],
 ['Shopping', 'eBay', 'www.ebay.co.uk']
 );
 
 
 //-->
 </script><script language="JavaScript" type="text/javascript">
 <!--
 // by Vic Phillips (26-Feb-2006) http://www.vicsjavascripts.org.uk
 
 function zxcMakeList(zxcid,zxcary){
 var zxcpobj=document.getElementById(zxcid);
 var zxcul=document.createElement('UL');
 var zxcli=document.createElement('LI');
 zxcul.appendChild(zxcli);
 zxcpobj.appendChild(zxcul);
 zxcpobj.ary=[];
 var zxcitem;
 for (var zxc0=0;zxc0<zxcary.length;zxc0++){
 if (zxcary[zxc0][0]!=zxcitem){
 zxcitem=zxcary[zxc0][0];
 zxculc=zxcul.cloneNode(false);
 zxclic=zxcli.cloneNode(false);
 zxclic.appendChild(document.createTextNode(zxcitem));
 zxculc.appendChild(zxclic);
 zxcpobj.appendChild(zxculc);
 zxclic.style.fontSize='18px';
 zxculc.slave=zxcul.cloneNode(false);
 zxculc.onclick=function(){ zxcDisplay(this); }
 zxculc.appendChild(zxculc.slave);
 zxculc.slave.style.display='';
 zxclic=zxcli.cloneNode(false);
 zxcitem1=zxcary[zxc0][1];
 zxclic.appendChild(document.createTextNode(zxcitem1));
 zxculc.slave.appendChild(zxclic);
 zxclic.url=zxcary[zxc0][2];
 zxclic.onclick=function(){ zxcLink(this); }
 zxculc.ary=zxcpobj.ary;
 zxcpobj.ary.push(zxculc.slave);
 }
 else {
 zxclic=zxcli.cloneNode(false);
 zxcitem1=zxcary[zxc0][1];
 zxclic.appendChild(document.createTextNode(zxcitem1));
 zxculc.slave.appendChild(zxclic);
 zxclic.url=zxcary[zxc0][2];
 zxclic.onclick=function(){ zxcLink(this); }
 
 }
 }
 zxcpobj.removeChild(zxcul);
 for (var zxc1=0;zxc1<zxcpobj.ary.length;zxc1++){
 zxcpobj.ary[zxc1].style.display='none';
 }
 }
 
 function zxcDisplay(zxcobj){
 if (zxcobj.slave.style.display!='none'){
 zxcobj.slave.style.display='none';
 }
 else {
 zxcobj.slave.style.display='block';
 }
 for (var zxc1=0;zxc1<zxcobj.ary.length;zxc1++){
 if (zxcobj.ary[zxc1]!=zxcobj.slave){
 zxcobj.ary[zxc1].style.display='none';
 }
 }
 }
 
 function zxcLink(zxcobj){
 window.top.location=zxcobj.url;
 }
 
 //-->
 </script>
 
 </head>
 
 <body onload="zxcMakeList('MyList',lists);">
 <div id="MyList" ></div>
 
 
 </body>
 
 </html>[/CODE]

@ChrisR23authorFeb 26.2006 — #Thanks for doing that! Interesting to see the different approaches to the same problem!

@phpnoviceFeb 26.2006 — #May I ask what editor you use Phpnovice?[/QUOTE]
I could use Notepad and be happy. However, I do use FrontPage -- for its WYSIWYG ability and built-in interactive JavaScript debugger only. I don't let FrontPage get away with generating my HTML, though. I'm constantly cleaning up behind FrontPage. You may ask ... Then why use it? My answer --- Because it is the lesser of evils. I feel other development environments are worse than FrontPage in this regard -- they try to take over. I like to code everything by hand. But it is a bit quicker, using a WYSIWYG editor, rather than switching back and forth between Notepad and a browser for testing. ? In the final analysis, I have to switch to the browser anyway. This is because even FrontPage doesn't render it quite like the browser does.

Also in #JavaScript _↴

Problem with load callback both in plain javascript and jquery Related to Search in ListBox with Textbox selected value from combo box value is not maintain

Success!

Help @ChrisR23 spread the word by sharing this article on Twitter...

Tweet This

Printing out contents of an Array?

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Printing out contents of an Array?

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴