Knockout-JS Filter Json Data

by Avinashullal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div id="portfolio" class="container page-container portfolio">
  <div class="row">
    <div class="col-md-12">
      <div class="padding-bottom padding-top-sm">
        <div class="form-inline">
          <div class="form-group">
            <strong>Age Group:</strong>
            <select id="Select_Toys" data-bind="options: agegroup, value: age">
            </select>
          </div>
        </div>
      </div>
      <ul style="visibility: hidden; display: none" class="portfolio-filter text-center">
        <li><a id="All" class="btn btn-default active" href="#" data-filter="*">All</a></li>
        <li><a id="6-1" class="btn btn-default" href="#" data-filter=".age_0">6-12 Months</a></li>
        <li><a id="1-2" class="btn btn-default" href="#" data-filter=".age_1">1-2 Years</a></li>
        <li><a id="2-3" class="btn btn-default" href="#" data-filter=".age_2">2-3 Years</a></li>
        <li><a id="3-5" class="btn btn-default" href="#" data-filter=".age_3">3-5 Years</a></li>
      </ul>
      <!--/#portfolio-filter-->
      <div class="portfolio-items" data-bind="foreach: filteredItems">
        <div class="col-xs-6 col-sm-4 col-md-3 portfolio-item age_1 age_2">
          <div class="portfolio-wrapper">
            <div class="portfolio-single">
              <div class="portfolio-thumb">
                <img data-bind="attr: { src: path + '/1.jpg' }" class="img-responsive" alt="">
              </div>
              <div class="portfolio-view">
                <ul class="nav nav-pills">
                  <li><a href="#" class="link_view_toy_details" data-bind="attr: { 'data-id': path }" data-toggle="modal" data-target="#ToyDetail-Modal"><i class="fa fa-link"></i></a></li>
                </ul>
              </div>
            </div>
            <div class="portfolio-info ">
              <h2 data-bind="text: name"></h2>
            </div>
          </div>
       ...

JavaScript

$(document).ready(function() {


  var ViewModel = function(data) {
    var self = this;
    self.agegroup = ko.observableArray(data.agegroup);
    self.age = ko.observable('');
    self.toys = ko.observableArray(data.toys);
    self.filteredItems = ko.computed(function() {
      var filter = self.age();
      if (!filter || filter == "All") {
        return self.toys();
      } else {
        return ko.utils.arrayFilter(self.toys(), function(i) {
          return i.age == filter;
        });
      }
    });
  };

  var initialData = {
    agegroup: ["All", "6-1", "1-2", "2-3", "3-5"],
    toys: [{
      "name": "Fisher Price Laugh and Learn Puppy\'s Crawl-Along Ball",
      "brand": "Fisher Price",
      "age": "1-2",
      "path": "toys/FP_Laugh & Learn Puppy's Crawl-Along Ball"
    }, {
      "name": "Fisher Price Laugh and Learn Learning Lantern",
      "brand": "Fisher Price",
      "age": "6-1",
      "path": "toys/FP_Laugh and Learn Learning Lantern"
    }, {
      "name": "Fisher Price Laugh and Learn Learning Toolbench",
      "brand": "Fisher Price",
      "age": "1-2",
      "path": "toys/FP_Laugh and Learn Learning Toolbench"
    }, {
      "name": "Fisher-Price Laugh and Learn Magic Scan Market",
      "brand": "Fisher Price",
      "age": "2-3",
      "path": "toys/FP_Laugh and Learn Magic Scan Market"
    }, {
      "name": "Fisher Price Laugh and Learn Smart Stages Tablet",
      "brand": "Fisher Price",
      "age": "3-5",
      "path": "toys/FP_Laugh and Learn Smart Stages Tablet"
    }, {
      "name": "Fisher Price Musical Instrument Gift with Set",
      "brand": "Fisher Price",
      "age": "6-1",
      "path": "toys/FP_Musical Instrument Gift with Set"
    }, {
      "name": "Fisher-Price Musical Pop-Up Eggs",
      "brand": "Fisher Price",
      "age": "1-2",
      "path": "toys/FP_Musical Pop-Up Eggs"
    }, {
      "name": "Fisher-Price Musical Lion Walker",
      "brand": "Fisher Price",
      "age": "1-2",
      "path":...