title: sort data pulled from API with Javascript
body: <p>I am currently pulling data from an API using ROR and displaying the results in my app using Jquery Masonry. I am trying to now allow a user to sort the data pulled in a few different ways after the page loads. I would like someone to be able to sort data by: "this week", "next week", and "next month". Also, I would like to create some pre-defined filters that users can select to futher filter their results, such as: "sports", "outdoors", "fitness", "hiking", "running", "cycling" etc. Is there a way to run a script that searches the page for these certain keywords and then eliminates the results that do not match? I have dove in JS @ all so any help would be greatly appreciated. </p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="/" style="padding:0"&gt;
          &lt;img src="../images/logo.png" class="logo"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse nav-search-from" id="bs-example-navbar-collapse-1"&gt;
        &lt;form role="form" data-toggle="validator" action="search"&gt;
          &lt;div class="form-inline search-form"&gt;
            &lt;div class="form-group search-box"&gt;
              &lt;input type="text" name="zipcode" class="form-control input-box" placeholder="Enter Zipcode" value="&lt;%= @zipcode %&gt;"required&gt;
            &lt;/div&gt;
            &lt;div class="form-group search-box"&gt;
              &lt;%= select_tag "radius", options_for_select(Radius::RADIUS, @radius), {"onChange" =&gt; "changeRadius(this)", class: "form-control"} %&gt;
            &lt;/div&gt;
            &lt;!--&lt;div class="form-group search-box"&gt;--&gt;
            &lt;!--&lt;input type="text" id="filter" class="form-control input-box" placeholder="Filter" value="&lt;%= @keyword %&gt;"&gt; --&gt;
            &lt;!--&lt;/div&gt;--&gt;
            &lt;div class="form-group search-box"&gt;
              &lt;button type="submit" class="search-button btn btn-success"&gt;
                &lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;
                &lt;span&gt;Search&lt;/span&gt;
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  
  &lt;div class="content"&gt;
    &lt;div class="event-container grid"&gt;
      &lt;% if @fitness_events %&gt;
          &lt;% @fitness_events.each do |fitness_event| %&gt;
              &lt;div class="grid-item"&gt;
                &lt;div class="event-list-container"&gt;
                  &lt;%= link_to "Register for event", {:controller =&gt; "meetup_events", :action =&gt; "detailed_event", :event =&gt; fitness_event['id'], :zip =&gt; @zipcode, :radius =&gt; @radius }, class: "join-button btn btn-success hidden" %&gt;
                  &lt;div class="row event-listing clearfix doc-padding"&gt;
                    &lt;p class="event-name"&gt;&lt;%= fitness_event['name'] %&gt;&lt;/p&gt;
                    &lt;% if fitness_event['photo'] %&gt;
                        &lt;div class=""&gt;
                          &lt;%= image_tag fitness_event['photo'], :class =&gt; "event_photo" %&gt;
                        &lt;/div&gt;
                    &lt;% end %&gt;
                  &lt;/div&gt;
                  &lt;div class="row heart-time"&gt;
                    &lt;div class="col-sm-3 col-xs-3"&gt;
                      &lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt;
                      &lt;%= fitness_event['yes_rsvp_count'] %&gt;
                    &lt;/div&gt;
                    &lt;div class="col-sm-9 col-xs-9 created-time"&gt;
                      &lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
                      &lt;%= Time.at(fitness_event['time']/1000).strftime("%b %e, %I:%M %p") %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-sm-12 col-xs-12 location"&gt;
                      &lt;% if fitness_event['venue'] %&gt;
                          &lt;i class="glyphicon glyphicon-map-marker"&gt;&lt;/i&gt;
                          &lt;%= fitness_event['venue']['address_1'] %&gt;
                      &lt;% end %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-sm-12 col-xs-12 location"&gt;
                      &lt;% if fitness_event['group'] %&gt;
                          &lt;i class="fa fa-users"&gt;&lt;/i&gt;
                          &lt;%= fitness_event['group']['name'] %&gt;
                      &lt;% end %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-sm-12 col-xs-12 description"&gt;
                      &lt;% if fitness_event['desc'] %&gt;
                          &lt;i class="fa fa-file-text"&gt;&lt;/i&gt;
                          &lt;%= fitness_event['desc'] %&gt;
                      &lt;% end %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;%= link_to "Register for event", {:controller =&gt; "meetup_events", :action =&gt; "join", :event =&gt; fitness_event }, class: "join-button btn btn-success pull-right", target: "_blank" %&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;% end %&gt;
      &lt;% end %&gt;
  
      &lt;% if @outdoor_events %&gt;
          &lt;% @outdoor_events.each do |event| %&gt;
              &lt;div class="grid-item"&gt;
                &lt;div class="event-list-container"&gt;
                  &lt;%= link_to "Register for event", {:controller =&gt; "meetup_events", :action =&gt; "detailed_event", :event =&gt; event['id'], :zip =&gt; @zipcode, :radius =&gt; @radius }, class: "join-button btn btn-success hidden" %&gt;
                  &lt;div class="row event-listing clearfix doc-padding"&gt;
                    &lt;p class="event-name"&gt;&lt;%= event['name'] %&gt;&lt;/p&gt;
                    &lt;% if event['photo'] %&gt;
                        &lt;div class=""&gt;
                          &lt;%= image_tag event['photo'], :class =&gt; "event_photo" %&gt;
                        &lt;/div&gt;
                    &lt;% end %&gt;
                  &lt;/div&gt;
                  &lt;div class="row heart-time"&gt;
                    &lt;div class="col-sm-3 col-xs-3"&gt;
                      &lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt;
                      &lt;%= event['yes_rsvp_count'] %&gt;
                    &lt;/div&gt;
                    &lt;div class="col-sm-9 col-xs-9 created-time"&gt;
                      &lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
                      &lt;%= Time.at(event['time']/1000).strftime("%b %e, %I:%M %p") %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-sm-12 col-xs-12 location"&gt;
                      &lt;% if event['venue'] %&gt;
                          &lt;i class="glyphicon glyphicon-map-marker"&gt;&lt;/i&gt;
                          &lt;%= event['venue']['address_1'] %&gt;
                      &lt;% end %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-sm-12 col-xs-12 location"&gt;
                      &lt;% if event['group'] %&gt;
                          &lt;i class="fa fa-users"&gt;&lt;/i&gt;
                          &lt;%= event['group']['name'] %&gt;
                      &lt;% end %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-sm-12 col-xs-12 description"&gt;
                      &lt;% if event['desc'] %&gt;
                          &lt;i class="fa fa-file-text"&gt;&lt;/i&gt;
                          &lt;%= event['desc'] %&gt;
                      &lt;% end %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;%= link_to "Register for event", {:controller =&gt; "meetup_events", :action =&gt; "join", :event =&gt; event }, class: "join-button btn btn-success pull-right", target: "_blank" %&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;% end %&gt;
      &lt;% end %&gt;
  
      &lt;% if @sports_events %&gt;
          &lt;% @sports_events.each do |event| %&gt;
              &lt;div class="grid-item"&gt;
                &lt;div class="event-list-container"&gt;
                  &lt;%= link_to "Register for event", {:controller =&gt; "meetup_events", :action =&gt; "detailed_event", :event =&gt; event['id'], :zip =&gt; @zipcode, :radius =&gt; @radius }, class: "join-button btn btn-success hidden" %&gt;
                  &lt;div class="row event-listing clearfix doc-padding"&gt;
                    &lt;p class="event-name"&gt;&lt;%= event['name'] %&gt;&lt;/p&gt;
                    &lt;% if event['photo'] %&gt;
                        &lt;div class=""&gt;
                          &lt;%= image_tag event['photo'], :class =&gt; "event_photo" %&gt;
                        &lt;/div&gt;
                    &lt;% end %&gt;
                  &lt;/div&gt;
                  &lt;div class="row heart-time"&gt;
                    &lt;div class="col-sm-3 col-xs-3"&gt;
                      &lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt;
                      &lt;%= event['yes_rsvp_count'] %&gt;
                    &lt;/div&gt;
                    &lt;div class="col-sm-9 col-xs-9 created-time"&gt;
                      &lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
                      &lt;%= Time.at(event['time']/1000).strftime("%b %e, %I:%M %p") %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-sm-12 col-xs-12 location"&gt;
                      &lt;% if event['venue'] %&gt;
                          &lt;i class="glyphicon glyphicon-map-marker"&gt;&lt;/i&gt;
                          &lt;%= event['venue']['address_1'] %&gt;
                      &lt;% end %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-sm-12 col-xs-12 location"&gt;
                      &lt;% if event['group'] %&gt;
                          &lt;i class="fa fa-users"&gt;&lt;/i&gt;
                          &lt;%= event['group']['name'] %&gt;
                      &lt;% end %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-sm-12 col-xs-12 description"&gt;
                      &lt;% if event['desc'] %&gt;
                          &lt;i class="fa fa-file-text"&gt;&lt;/i&gt;
                          &lt;%= event['desc'] %&gt;
                      &lt;% end %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;%= link_to "Register for event", {:controller =&gt; "meetup_events", :action =&gt; "join", :event =&gt; event }, class: "join-button btn btn-success pull-right", target: "_blank" %&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;% end %&gt;
      &lt;% end %&gt;
    &lt;/div&gt;
  
    &lt;% if @fitness_events.empty? &amp;&amp; @outdoor_events.empty? &amp;&amp; @sports_events.empty? %&gt;
        &lt;p class="no-result"&gt;No Search Result&lt;/p&gt;
    &lt;% end %&gt;
  &lt;/div&gt;
  
  &lt;script src="https://cdnjs.com/libraries/1000hz-bootstrap-validator"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  //    var grid = document.querySelector('.grid');
  //
  //    $(window).load(function(){
  //        $('.grid').masonry({
  //            // options...
  //            itemSelector: '.grid-item',
  //            gutter: 10
  //        });
  //    });
      $(window).ready(function(){
          // init Masonry
          var $grid = $('.grid').masonry({
              // options...
              itemSelector: '.grid-item',
              gutter: 10
          });
          // layout Masonry after each image loads
          $grid.imagesLoaded().progress( function() {
              $grid.masonry('layout');
          });
      });
  //    var msnry = new Masonry( grid, {
  ////        // options...
  ////        columnWidth: 20,
  ////        fitWidth: true,
  //        itemSelector: '.grid-item',
  //        gutter: 10
  //    });
  //    $("div.grid-item").click(function() {
  //        window.location=$(this).find("a").attr("href"); return false;
  //    });
      function changeRadius(x){
          radius = x.value;
      }
  &lt;/script&gt;
  </code></pre>