CODEWITHSUNDEEP
javascriptarraysangularjsjson
Jack
Jack

Reputation: 25

angular ng-options complex json array

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!

Upvotes: 1

Views: 899

Answers (1)

Joao Polo
Joao Polo

Reputation: 2163

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

Upvotes: 1

Related Questions