How can you filter objects by an array in angularjs

Question

was just wondering if you can filter an existing array with another array of filter.

So say our original json was:

[

   {
    "bookname": "harryporter",
    "year": "2000",
    "author":"J. K. Rowling"

   }, 

   {
    "bookname": "Sleepless",
    "year": "2003",
    "author":"Connie Ann Michael"

   },

   {
    "bookname": "No man's land",
    "year": "1993"
    "author":"Harold Pinter"

   }

];

Filter array:

[
"year":"1993"
"bookname":"No man"
]

Also is there a way to dynamically add elements to array when you edit input, perhaps type in text ?

for example:

Input

<div>
<input type="text" ng-model={{ filterArray.insert("bookname":"value") }}>Book Name
</div>

Filter

<div ng-repeat="books in originalJson | filter: filterArray">
{{books.author}}
</div>

I hope i have explained my question enough, cheers

you don't filter json. json is just a string. you decode that json string into a native JS array/object and filter that. — Marc B
– Marc B, Commented Aug 18, 2014 at 16:10
Not exactly an array filter or Angular, but maybe close to what you're looking for in underscore.js where. — vch
– vch, Commented Aug 18, 2014 at 16:10
Take a look at this filtering: stackoverflow.com/questions/11923142/… Get your filtering values from input, then create a JS function that compares those values with the JSON data. Set that JS function as the 'filter:' — Ben Sewards
– Ben Sewards, Commented Aug 18, 2014 at 16:12
sorry guys, i have updated the question by adding code, for some reason, it didnt show up — ipalibowhyte
– ipalibowhyte, Commented Aug 18, 2014 at 16:18

gkalpak · Accepted Answer · 2014-08-18 17:37:12Z

1

If you want to filter by multiple values, you can pass in a filter-object.
Each key corresponds to a field-name and each value filters the items based on the corresponding key.

Book name: <input type="search" ng-model="filterObj.bookname" />
Year:      <input type="search" ng-model="filterObj.year" />
<div ng-repeat="book in books | filter:filterObj">...</div>

See, also, this short demo.

If you want to let the user dymanically specify the field to filter by, you can do that too (although it is not very common practice):

Filter by:
<input type="search" ng-model="dynamicField"
       placeholder="Field to filter by" />
<input type="search" ng-model="filterObj[dynamicField]"
       placeholder="Value to filter by" />
<div ng-repeat="book in books | filter:filterObj">...</div>

answered Aug 18, 2014 at 17:37

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

5 Comments

ipalibowhyte Over a year ago

thanks alot, but what i want is to dynamically insert the name of each ng-model for each input into an array so that in my filter i reference those model's i am basically building a dynamic website where angualar isn't aware of any input until add them using the config.json file. cheers

gkalpak Over a year ago

@Pizzy213codes: I don't quite get what you want to achieve (or why). Can't the config.json initialize the filterObj as well ? Did you study my demo ?

ipalibowhyte Over a year ago

you have literally saved my life !!!!!!!, i have been on this for a day now !!! O_o Thanks so much, please could you recommend a good brush up angular js tutorial. I can use angualr, but lack substantial knowledge of it:(

gkalpak Over a year ago

@Pizzy213codes: The official tutorial is one of the best around. Egghead.io has some "must-watch" short videos on various concepts as well. This tutorial was my way into Angular (but I think it's more on beginner level, which you are obviously not). Make sure you carefully read the docs (API reference) and from there you just code-code-code and delve into the source-code.

gkalpak Over a year ago

@Pizzy213codes: (You might also want to regularly check up on the changelog to see what has changed and what new features are available (or in beta).)

Collectives™ on Stack Overflow

How can you filter objects by an array in angularjs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related