AngularJS(1.6.6) ngOptions Filter is not working (not doing anything)

55 views Asked by At

I am working in a small website, I am calling an array of items from a JSON file (this is working properly). But I want to give the user the option to see either All Items or Available Items or No Longer Available Items. I am using a HTML select element to create a dropdown list where user can choose what to see.

However this is the part where I am having my issue. I have my code looking at what type the Item is (if is Available or not in the JSON is "typ"). but when I run the app these options are not being display in my select options and my code return all the items.

Any suggestion is deeply appreciated. Thank you

[{
"ID": "1",
"Image": "Images/Home1.jpg",
    "Name": "Home 1",
    "Text": "This is the Image of home 1",
"typ": ["Sold"]  /* should filter using this */
},
{
"ID": "2",
"Image": "Images/Home2.jpg",
    "Name": "Home 2",
    "Text": "This is the Image of home 2",
"typ": ["Available"] /* should filter using this */

}
]
  var self = this;
  var delaytime = 500;
  $timeout(function(){
      $http({
        method: 'GET',
        url: 'JSON/HomeProjects.json'
      }).then(function(response) {
          self.projectItems = response.data;

          self.QueryArray = [];

          for (var i = 0; i < self.projectItems.length; i++){
            for (var k = 0; k < self.projectItems[i].typ.length; k++){
              self.QueryArray.push(self.projectItems[i].typ[k]);
            }
          }

          self.uniqueTypes = self.QueryArray.filter(function(myItem, index){
              return self.QueryArray.indexOf(myItem) == index;
          });

      },self.customFilter = function(myItem){

          if(myItem===null){
              return "";
          }
          else{
              return myItem;
          }
      },function (error){
          console.log("There is an error");
      });

  },delaytime);
<div class="Projects_FilterBar">
 <p class="Projects_Filt_txt"><strong>Search By:</strong></p>
  <select class="Project_Options" ng-model="selected"
          ng-options="myItem.typ for myItem in uniqueTypes">
   <option value="">All</option>
  </select>
</div>
<div class="Projects_Container">
  <ul class="Projects_List" ng-repeat="Item in $ctrl.projectItems | 
  filter: customFilter(selected)">
<div class="Project_Item_Cont">
  <a href="#!/projects/{{Item.ID}}"><img class="Project_Image" ng-src=" 
   {{Item.Image}}" alt="{{Item.Text}}" /></a>
  <li class="Project_Item">{{Item.Name}}</li>

</div>
</ul>
</div>
0

There are 0 answers