How to filter a json array in angularjs?

Question

I have two $scope values one is array and the other one is json array

$scope.extensions = ["jpg", "xlsx", "pdf", "docx", "mp4"]

$scope.files ={'exten':"jpg","Value":""filepath/data1.jpg"},{'exten':"pdf","Value":""filepath/data2.pdf"},{'exten':"mp4","Value":""filepath/data3.mp4"},{'exten':"jpg","Value":""filepath/data4.jpg"}

if i click on jpg box it should show only data1.jpg and data4.jpg

here is my code for the front end

<div style="padding-left: 100px;margin-top: 50px;">
                <div style="border: 1px solid cornflowerblue; width: 100px; height: 100px;float:left;margin-left: 50px;" ng-repeat="element in extensions">
                    <button ng-click="showFile(element)">{{element}}</button>
                </div>         
            </div>
        <br/>


 <div style="border: 1px solid cornflowerblue; width: 900px; height: 300px;margin-left: 50px;margin-top:100px;" ng-repeat="element in extensions"  ng-show="clickFile==element">
              {{element}}
        </div>

Possible duplicate of How to filter JSON Data with AngularJs — Jake Chasan
– Jake Chasan, Commented Apr 26, 2016 at 6:27

Hadi · Accepted Answer · 2016-04-26 06:36:41Z

var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
  $scope.extensions = ["jpg", "xlsx", "pdf", "docx", "mp4"];

$scope.files =[{'exten':"jpg","Value":"filepath/data1.jpg"},{'exten':"pdf","Value":"filepath/data2.pdf"},{'exten':"mp4","Value":"filepath/data3.mp4"},{'exten':"jpg","Value":"filepath/data4.jpg"}];
  
  
  $scope.showFile = function(element){
    
    $scope.clickFile = element;
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">

<div style="padding-left: 100px;margin-top: 50px;">
                <div style="border: 1px solid cornflowerblue; width: 100px; height: 100px;float:left;margin-left: 50px;" ng-repeat="element in extensions">
                    <button ng-click="showFile(element)">{{element}}</button>
                </div>         
            </div>
        <br/>{{clickFile}}
  
  <div style="border: 1px solid cornflowerblue; width: 900px; height: 300px;margin-left: 50px;margin-top:100px;" ng-repeat="file in files | filter:{exten:clickFile}">
              {{file.Value}}
        </div>

</div>

try this

ng-repeat="file in files | filter:{exten:clickFile}"

mfrachet · Accepted Answer · 2016-04-26 06:28:08Z

0

You have multiple solutions, like creating your own filter corresponding your case (filter by extension for example)

But concerning your example, you can also set a currentFilterValue, and apply it directly on the ng-repeat.

For example :

showFile = function(element){
  /*...*/
  this.myFilterValue = element;
}


<div style="padding-left: 100px;margin-top: 50px;">
  <div style="border: 1px solid cornflowerblue; width: 100px; height: 100px;float:left;margin-left: 50px;" ng-repeat="element in extensions | filter:myFilterValue">
    <button ng-click="showFile(element)">{{element}}</button>
  </div>
</div>
<br/>

answered Apr 26, 2016 at 6:28

$mfrachet's user avatar$

mfrachet

8,95217 gold badges62 silver badges114 bronze badges

Collectives™ on Stack Overflow

How to filter a json array in angularjs?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related