angular ng-options complex json array

Question

im trying to make a small search engine, using angular and a json object. im sorting the querys with 3 drop down lists chained so that they populate them selves depending on the selection. the structure is so: a json object that holds an array of categorys, each category holds an array of products, and each products array hold parameters such as price, name, etc. so when a user selects a category, the second drop down list gets populated with the relevant products. and when the user selects the relevant product the third drop down list gets populated with this products price.

here is the json:

[{
    "caregory": "Electronics",
    "products": [{
        "product": "PC",
        "description": "Item4 Product Page",
        "price": 99.99
    }, 
    {
        "product": "PC",
        "description": "Item4 Product Page",
        "price": 2999.99
    },{
         "product": "TV",
        "description": "lorem ipsum possum",
        "price": 250.00
    }]
},  {
    "caregory": "Home Design",
    "products": [{
        "product": "Paintings",
        "description": "awesome description about anything",
        "price": 200.00
    }, {
        "product": "Pencils",
        "description": "we are filters",
        "price": 29.99
    }, {
        "product": "Sharpies",
        "description": "loremloremlorem",
        "price": 89.00
    }
]
}]

here is the js:

var app = angular.module('app', ['angular.filter']);

var Controller = function($scope,$http) {
  $http.get('data.json')
          .success(function(data) {
      $scope.data = data;


        });
        var data;
  $scope.selected = {};
  $scope.data = $scope.data;
  console.log($scope.data);
  var self = this;




  $scope.search = function(predicate)
  {
    $scope.searchPredicate = predicate;
  }  
}

app.controller('ctrl', Controller);

and here is the view:

<!DOCTYPE html>
<html ng-app="app">

  <head>
     <link rel="stylesheet" href="style.css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script src="filters.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="ctrl">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <div class="jumbotron">
    <h1>Search engine</h1>


  </div>
  <form>
    <div class="form-group">
      <label for="caregory">Category</label>
      <select id="caregory" data-ng-model="selected.category" ng-options="option as option.caregory for option in data |  orderBy:'caregory'">
        <option value="">None</option>
      </select>
      <br />
      <br />
      <label for="filters">Product type</label>
      <select id="filters" ng-model="selected.type" ng-options="option as option.product for option in selected.category.products | unique: 'product'">
        <option value="">None</option>
      </select>
      <br>
      <br>
      <label for="filters">Price</label>
      <select id="filters" ng-model="selected.price" ng-options="option as option.price for option in selected.category.products | unique: 'price'">
        <option value="">None</option>
      </select>
    </div>
    <div class="form-group" ng-if="selected.price">
      <button class="btn btn-primary" ng-click="search(selected.price)">Search</button>
    </div>

    <div ng-if="searchPredicate">
      Searching for <b>{{searchPredicate.product}}</b> in <b>{{searchPredicate.description}}</b> with price <b>{{searchPredicate.price | currency}}</b>
      </div>
  </form>

</body>

</html>

heres a plunker:

http://plnkr.co/edit/omLQMQa39TRVMXovRKcD?p=preview

thanks!

@Dvir the original code doesn't filter for the selected product type at third select, and shows all prices. — Joao Polo
– Joao Polo, Commented Nov 26, 2015 at 11:06

Joao Polo · Accepted Answer · 2015-11-25 23:53:17Z

1

You need to apply a filter on third select, to filter only products equals to selected:

<select id="filters" 
    ng-model="selected.price" 
    ng-options="option as option.price for option in selected.category.products | filter: { product: selected.type.product } | unique: 'price'">
    <option value="">None</option>
 </select>

take a look at plunker

answered Nov 25, 2015 at 23:53

Joao Polo

2,1631 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jack Over a year ago

Thank you my friend! You're spot on! I tried to filter using the ng model from the second drop down list. I guess I just got mixed up in all the syntax! You're a life saver!

Joao Polo Over a year ago

You're welcome. And thank you for the filter 'unique'. I did not know that filter.

Collectives™ on Stack Overflow

angular ng-options complex json array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related