SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Nov 2003
    Location
    Malmoe, Sweden
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Converting a one-dimensional array to a multidimensional array?

    Hello,

    I have a problem converting a one-dimensional array to a multidimensional array.

    I have this NodeList as an array:
    Code:
    arrHeaders = new Array('h1', 'h2', 'h2', 'h3', 'h1', 'h2', 'h3', 'h4', 'h3' ...);
    It gets itīs data from the document structure. In this example:
    Code:
    <h1>Lorem</h1>
    <h2>Ipsum</h2>
    <h2>Mit</h2>
    <h3>Dolar</h3>
    <h1>Sit</h1>
    <h2>Amit</h2>
    <h3>Lipsum</h3>
    <h4>Festina</h4>
    <h3>Lente</h3>
    .
    .
    .
    Now I want to convert this to a multidimensional array. Iīm not really sure this is the correct approach of the problem. I want to have the different header nodes structured in some sort of hierarchy. Idéas? As I said, I donīt know if this is "the correct way" of doing a thing like this and i am perplexed of not having the smallest clue of how to approach this problem.

    Later on I want to print out a HTML list with it using <ol> or <ul>. Itīs a TableOfContentenizer

    Tnx in advance!

  2. #2
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The simplest solution would be save headlines' text along with their levels to an array like this:

    Code:
    list = [
      { level:1, text: "Lorem" },
      { level:2, text: "Ipsum" },
    etc
    ]
    and then output this array using simple level-counting routine

    Code:
    <!-- text to process -->
    
    <div id=CONTENT>
    <h1>1</h1>
    	<h2>1.1</h2>
    	<h2>1.2</h2>
    		<h3>1.2.1</h3>
    	<h2>1.3</h2>
    	
    <h1>2</h1>
    	<h2>2.1</h2>
    
    <h1>3</h1>
    </div>
    
    <script>
    // this traverses speicific document area
    // and builds an array as above
    
    function buildList(node){
    	var cc=node.getElementsByTagName("*")
    	var result=[], e;
    	for(var i=0; i<cc.length; i++){
    		if(e=cc[i].tagName.match(/h(\d)/i))
    			result.push({ level: e[1], text: cc[i].firstChild.nodeValue });
    	}
    	return result;
    }
    
    // this returns html for the list
    
    function printList(list) {
    	var currLevel=0;
    	var out=[];
    	for(var i=0; i<list.length; i++){
    		for(var lev=list[i].level; lev > currLevel; lev--)
    			out.push("<ul>");
    		for(var lev=list[i].level; lev < currLevel; lev++)
    			out.push("</ul>");
    		out.push("<li>"+list[i].text+"</li>");
    		currLevel=list[i].level;
    	}
    	while(currLevel--)
    		out.push("</ul>");
    	return out.join("\n");
    }
    
    // lets test
    
    window.onload=function(){
    	var list = buildList(document.getElementById("CONTENT"));
    	var out=printList(list);
    	document.write(out);
    }
    
    </script>

  3. #3
    SitePoint Addict
    Join Date
    Nov 2003
    Location
    Malmoe, Sweden
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for you answer stereofrog. Itīs quite som kung-fu code you got for me Thanks a lot. Itīs just one problem. Even if it produces well formed XHTML mark up it produces structural incorrect mark up.

    This is what I get:
    Code:
    <ul>
    	<li>1</li>
    	<li>2</li>
    	<ul>
    		<li>2.1</li>
    		<li>2.2</li>
    	</ul>
    	<li>3</li>
    	.
    	.
    	.
    This is what I want:
    Code:
    <ul>
    	<li>1</li>
    	<li>2
    		<ul>
    			<li>2.1</li>
    			<li>2.2</li>
    		</ul>
    	</li>
    	<li>3</li>
    	.
    	.
    	.
    But you have sure helped me lightyears! Thanks again. I will now try to do some kung-fu coding myself.

    I guess there must be som kind of recursive function.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •