www.webdeveloper.com
Results 1 to 8 of 8

Thread: Searching an Array

  1. #1
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75

    Searching an Array

    So, Im curious if its possible to search an array and than put the result in a variable. I think my wording may be off, but here is an example:

    Lets say Im trying to pass things through an <a> tag. Lets say I have this:
    HTML Code:
    <a href="#" rel="width:100|height:200|name:test">
    Here's a rough JS:
    Code:
    var link = document.getElementsByTagName('a');
    for (var i=0; i<link.length; i++) {
         getSettings(this.rel);
    }
    
    function getSettings(link) {
         var options = link.split('|'),
              width = '',
              height = '',
              name = '';
    
         *SEE BELOW
    }
    Now without doing options[0], options[1] and etc... is there a way to search all of them?

    So do something like if any of the options contains width: set the variable named width with that option so... the variable width would equal width:100, and etc... And then do something that says if it doesnt have width set a width, so width = 100 (default value)

    Currently I just did the options[0], options[1] and etc.. technique and used the match function and just checked each one.

    Any ideas? Because doing it the way I did it seems very simple and repetitive.

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    i would put the options in an object instead of loose vars.
    then parse the string into an object and merge it with your options.

  3. #3
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75
    Can you provide an example to what you mean by this?

  4. #4
    Join Date
    Sep 2011
    Location
    India
    Posts
    21

    Thumbs up i hope this solves your problem

    Hi ,mike,

    Here is the sample code,

    we are declaring an array containing the attributes which are to be matched,
    then passing parameter to the getSettings() function, there we checking whether the any of the attribute exisits or not.


    Code:
    <html>
    
    <head>
    
    <title></title>
    <script type="text/javascript">
        var attributes=new Array("width","height","name");
        var finalresult="";
       function test()
       { 
        var link = document.getElementsByTagName('a');
        for (var i=0; i<link.length; i++) {
         getSettings(link[i].rel);
        }
       }
    
        function getSettings(val) {
        for(var i=0;i<attributes.length;i++)
        {
         
         var matchedIndex=val.indexOf(attributes[i]);
         if(matchedIndex>=0)
          {
            
            val=val.substring(attributes[i].length+1,val.length);
            
            var seperatorIndex=val.indexOf('|');
            
            if(seperatorIndex!=-1)
            {
               var attributeValue=val.substring(matchedIndex,seperatorIndex);
               
            }
            else
            {
               var attributeValue=val.substring(matchedIndex,val.length+1);
            }
            val=val.substring(seperatorIndex);;
            finalresult=finalresult+attributes[i]+" is "+attributeValue.toString()+"\n";
           }
        }
        alert(finalresult);
       }
    </script>
    </head>
    
    <body>
    <a href="#" rel="width:100|height:200|name:test">
    
    <input type="button" value="Click" onclick="test()"/>
    
    
    </body>
    
    </html>

    Thanks
    Mourya

  5. #5
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75
    This is great, thanks!

    However what if I put the attributes in different places? So If I put it as height:200|width:100|name:test and etc... How do I account for that?

  6. #6
    Join Date
    Sep 2011
    Location
    India
    Posts
    21

    Well i haven't tried it.

    if thats the case , then i need to work a liitle bit, so that it will give the expected results , no matter if the position of the attributes is changed.

    i will post a generic code for that purpose.

  7. #7
    Join Date
    Sep 2011
    Location
    India
    Posts
    21

    Thumbs up Cheers finally i figured it out

    Here is the code that works even if you change the order of the attributes in rel for the anchor tag.

    Here we are sorting the array which is defined in the javascript.

    and also we are sorting the rel values that is being passed to the javascript function.



    Code:
    <html>
    
    <head>
    
    <title></title>
    <script type="text/javascript">
        var attributes=new Array("height","width","name");
        //sort the array element using the in built sort() javascrit function
        attributes=attributes.sort();
        
        //declare a global variable
        var finalresult="";
       
       //this is the function which is being called when the button is clicked 
       function test()
       { 
       //find all the anchor elements in the form
        var link = document.getElementsByTagName('a');
        //loop through them 
        for (var i=0; i<link.length; i++) {
        //then spliting the rel and then sorting which will give us a array and it is stored in variable  attrbts
         var attrbts=link[i].rel.toString().split('|').sort();
         
         //the call the function which will search for the attributes , note here we are converting attrbts again to a string
         getSettings(attrbts.toString());
        }
       }
    
        function getSettings(val) {
        for(var i=0;i<attributes.length;i++)
        {
         //now from the attributes pick one value at a time and process it
         var matchedIndex=val.indexOf(attributes[i].toString());
         //if the attribute exists then enter the loop
         if(matchedIndex>=0)
          {
            val=val.substring(attributes[i].length+1,val.length);
            
            var seperatorIndex=val.indexOf(',');
            //check whether the seperator(,) contains or not
            if(seperatorIndex!=-1)
            {
               var attributeValue=val.substring(matchedIndex,seperatorIndex);
            }
            else
            {
               var attributeValue=val.substring(matchedIndex,val.length+1);
            }
            val=val.substring(seperatorIndex);
            finalresult=finalresult+attributes[i]+" is "+attributeValue.toString()+"\n";
           }
        }
        alert(finalresult);
       //after all the processing is being done , set finalresult value to default value.
        finalresult="";
       }
    </script>
    </head>
    
    <body>
    <a href="#" rel="width:100|height:200|name:test"></a>
    
    <input type="button" value="Click" onclick="test()"/>
    
    
    </body>
    
    </html>

  8. #8
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    A shorter way ?

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>Untitled</title>
    <style type="text/css">
    </style>
    </head>
    <body>
    <a href="#" rel="width:100|height:200|name:test">link</a>
    <script type="text/javascript">
    // A tools to see an Object with alert
    Object.prototype.toString=function(){var i,c='';for (i in this) c+='\nkey '+i+' => value '+this[i];return c;}
    // the links, two table and an object
    var link=document.getElementsByTagName('a'),tblk=[],kyvl=[],obj={};
    
    for (var i=0; i<link.length; i++) {
    	tblk=link[i].rel.split(/\|/g);
    	for (j=0;j<tblk.length;j++) {kyvl=tblk[j].split(/:/g);obj[kyvl[0]]=kyvl[1];}
    }
    alert(obj);
    </script>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles