www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Search Javascript Object array

  1. #1
    Join Date
    May 2011
    Posts
    52

    resolved [RESOLVED] Search Javascript Object array

    Hi all,

    I am trying to make a more manageable and better functioning store locator for the company I work for and for reasons I won't get into I am unable to use MySQL so have settled on javascript.

    I have managed to create an object array which holds each store as an object with its url, page title, etc etc but what I can't figure out is how to search the array and display a list of stores that include the keyword searched for.

    Here is white I've got so far:

    HTML 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" xml:lang="en" lang="en">
    <head>
    <title></title>  
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    </head>
    <body>
    
    <script type="text/javascript">
    /* <![CDATA[ */ 
    
    function d(page,title,location,suburb,city,region){      // This function constructs the objects
    this.dp=page;
    this.dt=title;
    this.dl=location;
    this.dsub=suburb;
    this.dcit=city;
    this.dreg=region
    }
    
    var Ds=new Array (
    new d("239bike.php","239 Bike","Pukekohe, Auckland","pukekohe","auckland","auckland"),
    new d("AdventureCycles.php","Adventure Cycles","Western Springs, Auckland","western springs","auckland","auckland"),
    new d("AlohaBikes.php","Aloha Bikes","Whangaparaoa, Auckland","whangaparaoa","auckland","auckland"),
    new d("AngusGemmell.php","Angus Gemmell LTD","Wairoa, Hawkes Bay","","wairoa","hawkes bay"),
    new d("AroundAgainCycles.php","Around Again Cycles","Woolston, Christchurch, Canterbury","woolston","christchurch","canterbury")
    )
    
    var s="";
    
    if (location.search != "")         // This takes the search string and and makes it variable "s"
    {
    var x = location.search.substr(1).split(";")
    for (var i=0; i<x.length; i++)
    {
    var y = x[i].split("=");
    }
    {
    var s=y[1]
    }
    }	
    /* ]]> */ 
    </script>
    
    
    <form action="searchengine.html">
    <input type="text" name="s" />
    <input type="submit" value="submit" />
    </form>
    
    <div id="results"></div>
    
      </body>
    </html>
    I've only included the first 5 store objects for convenience.

    Basicly, the above works by taking the value that is put into the form when the submit button is clicked and re-loading tha page with that value now stored in the variable "s"

    What I want to do from here is search through the array and take any objects where "dsub", "dcit" or "dreg" match "s" then add them to a new array (Stores) which I can write to the page using the below code:

    HTML Code:
    <html>
    <head>
    <title></title>
    </head>
    
    ...
    
    <div id="results"></div>
    
    <script type="text/javascript">
    var results=""
    var Storesn=Stores.length;
    
    for (i=0; i<Storesn; i++)
    {
    results=results + ("<p><a href='"+Stores[i].dp+"'>"+Stores[i].dt+"</a><br />\n"+Stores[i].dl+"</p>\n");		
    }
    
    document.getElementById("results").innerHTML=results;
    }
    </script>
    </body>
    </html>
    I can't for the life of me figure this out considering I am realtively new to Javascript.

    If any of you can point me in the right direction or help me get this working it would be a massive help and hugely appreciated.

    Thanks in advance

  2. #2
    Join Date
    May 2011
    Posts
    52
    I seem to be making progress using:
    HTML Code:
    var Stores=new Array ();
    
    for (i=0; i<Dn; i++)
    {
    if (Ds[i].dreg==s)
    {
    Stores.push(Ds[i])
    }
    else if (Ds[i].dcit==s)
    {
    Stores.push(Ds[i])
    }
    else if (Ds[i].dsub==s)
    {
    Stores.push(Ds[i])
    }
    }
    will update when I get this working how I want it to.

    Feel free to point out anything I may have missed. Thanks.

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    this should get you started:

    Code:
    function d(page,title,location,suburb,city,region){      // This function constructs the objects
    this.dp=page;
    this.dt=title;
    this.dl=location;
    this.dsub=suburb;
    this.dcit=city;
    this.dreg=region
    }
    
    var Ds=new Array (
    new d("239bike.php","239 Bike","Pukekohe, Auckland","pukekohe","auckland","auckland"),
    new d("AdventureCycles.php","Adventure Cycles","Western Springs, Auckland","western springs","auckland","auckland"),
    new d("AlohaBikes.php","Aloha Bikes","Whangaparaoa, Auckland","whangaparaoa","auckland","auckland"),
    new d("AngusGemmell.php","Angus Gemmell LTD","Wairoa, Hawkes Bay","","wairoa","hawkes bay"),
    new d("AroundAgainCycles.php","Around Again Cycles","Woolston, Christchurch, Canterbury","woolston","christchurch","canterbury")
    )
    
    
    
    
    
    
    var props=[ "dsub", "dcit" ,"dreg"]; //where to look
    var term="es"; //what to look for
    
    var found=Ds.filter(function(store){ //matching stores:
      return props.filter(function(prop){
        return store[prop].match(term);
      }).length;
    });
    
    
    
    alert(JSON.stringify( found ,null,"\t"))

  4. #4
    Join Date
    May 2011
    Posts
    52
    Hey, thanks for that. That is very cool.

    Just started playing with it and can tell it's way better than the path I was going down. Much appreciated.

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