Angularjs Filter array using property inside other object

Question

I have the following Json File...

ill Show u only 1 object... i have 154 with the same structure i want filter the name... when in art_type.name = '--Something...--'

{
"1": {
    "name": "Miami City Ballet",
    "created": "2011-04-24 00:39:28",
    "modified": "2015-09-02 09:30:49",
    "author": [],
    "slug": "miami-city-ballet",
    "address": "2200 Liberty Ave.",
    "city": "Miami Beach",
    "state": "Fl.",
    "zipcode": "33139",
    "phone_number": "Box Office: 305 929 7010",
    "email_address": "[email protected]",
    "web_address": "http://www.miamicityballet.org",
    "twitter_address": "https://twitter.com/MiamiCityBallet",
    "facebook_address": "https://www.facebook.com/miamicityballetschool",
    "instagram_address": "",
    "gallery_hours": "<div><span style=\"line-height: 1.4em;\">order </span><span style=\"line-height: 1.4em;\">by phone 1 877 929 710</span></div>\n<div>or in person</div>\n<div><b>Box Office Hours:</b></div>\n<div>Mon - Fri: 10 - 5</div>\n<div><b>Tickets start at $25</b></div>\n<div>Grand Opening:</div>\n<div><b>Friday, October 23, 8 pm</b></div>\n<div><b>Arsht Center</b></div>",
    "gallery_id": "46",
    "additional_details": "October 23 - November 15\n<h3>Program One:</h3>\n<div>Swan Lake – Balanchine/Tchaikovsky</div>\n<div>Viscera – Scarlett/Liebermann</div>\n<div>Fancy Free – Robbins/Bernstein</div>",
    "gallery_additional_info": "Swan Lake is the most famous of all ballets, its name practically synonymous with the art form. Miami City Ballet is excited to be bringing back to our audiences the glorious version of Acts Two and Four – the “white acts” – that George Balanchine created in 1951 for Maria Tallchief and New York City Ballet. More than a tragic romance, it is a timeless meditation on the universal experience of love and loss, set to Tchaikovsky’s most evocative score.",
    "critics_choice": "0",
    "circuit": {
        "6": {
            "name": "Art Is Everywhere",
            "created": "2011-04-24 00:33:19",
            "modified": "2011-04-24 00:33:19",
            "author": false,
            "slug": "art-is-everywhere",
            "id": 6
        }
    },
    "art_type": {
        "1": {
            "name": "Performing Arts",
            "created": "2011-04-24 00:29:55",
            "modified": "2011-04-24 00:29:55",
            "author": false,
            "slug": "performing-arts",
            "id": 1
        }
    },
    "monthly_update": {
        "ID": "273",
        "post_author": "1",
        "post_date": "2011-04-14 16:45:58",
        "post_date_gmt": "2011-04-14 21:45:58",
        "post_content": "April 1 - 3\r\nKravis Center for the Performing Arts\r\n\r\nApril 29 - May 1\r\nBroward Center for the Performing Arts\r\n<strong> Program IV - Romeo and Juliet</strong>\r\nThe Company Premiere of John Cranko’s version\r\n<em>The New York Times raves, “arguably the best dance treatment of Prokofiev’s celebrated score.â€</em>\r\n<table border=\"0\" cellspacing=\"2\" cellpadding=\"1\" width=\"350\" align=\"center\">\r\n<tbody>\r\n<tr>\r\n<td align=\"center\" valign=\"top\">\r\n<div><img src=\"http://www.artcircuits.com/newsletters/images/Jennifer-Kronenberg-and-Carlos-Guerra-11.jpg\" alt=\"image\" width=\"100\" height=\"74\" align=\"top\" /></div></td>\r\n<td height=\"100\" align=\"center\" valign=\"top\">\r\n<div><img src=\"http://www.artcircuits.com/newsletters/images/2Jennifer-Kronenberg-and-Carlos-Guerra-11.jpg\" alt=\"image\" width=\"98\" height=\"127\" align=\"top\" /></div></td>\r\n<td align=\"center\" valign=\"top\">\r\n<div><img src=\"http://www.artcircuits.com/newsletters/images/Carlos-11.jpg\" alt=\"image\" width=\"100\" height=\"99\" /></div></td>\r\n</tr>\r\n<tr>\r\n<td width=\"100\" align=\"center\" valign=\"top\">\r\n<div>Jennifer Kronenberg and Carlos Guerra in Romeo and Juliet. Photo © 2009 Lois Greenfield.</div></td>\r\n<td width=\"100\" height=\"0\" align=\"center\" valign=\"top\">\r\n<div>Jennifer Kronenberg and Carlos Guerra in Romeo and Juliet. Photo © 2009 Lois Greenfield.</div></td>\r\n<td width=\"100\" height=\"0\" align=\"left\" valign=\"top\">\r\n<div>Carlos Guerra in Romeo and Juliet. Photo © 2009 Lois Greenfield.</div></td>\r\n</tr>\r\n</tbody>\r\n</table>\r\nMore<a href=\"http://www.miamicityballet.org/\"> www.miamicityballet.org</a>",
        "post_title": "Miami City Ballet - April 2011",
        "post_excerpt": "",
        "post_status": "publish",
        "comment_status": "open",
        "ping_status": "open",
        "post_password": "",
        "post_name": "miami-city-ballet-april-2011",
        "to_ping": "",
        "pinged": "",
        "post_modified": "2011-04-14 16:54:57",
        "post_modified_gmt": "2011-04-14 21:54:57",
        "post_content_filtered": "",
        "post_parent": "0",
        "guid": "http://artcircuits..com/?p=273",
        "menu_order": "505",
        "post_type": "post",
        "post_mime_type": "",
        "comment_count": "0",
        "pod_item_id": "273"
    },
    "thumbnail": false,
    "caption": "<!-- [if gte mso 9]><xml>\n<o:DocumentProperties>\n<o:Template>Normal.dotm</o:Template>\n<o:Revision>0</o:Revision>\n<o:TotalTime>0</o:TotalTime>\n<o:Pages>1</o:Pages>\n<o:Words>33</o:Words>\n<o:Characters>191</o:Characters>\n<o:Company>lpa2790</o:Company>\n<o:Lines>1</o:Lines>\n<o:Paragraphs>1</o:Paragraphs>\n<o:CharactersWithSpaces>234</o:CharactersWithSpaces>\n<o:Version>12.0</o:Version>\n</o:DocumentProperties>\n<o:OfficeDocumentSettings>\n<o:AllowPNG></o:AllowPNG>\n</o:OfficeDocumentSettings>\n</xml><![endif]--><!-- [if gte mso 9]><xml>\n<w:WordDocument>\n<w:Zoom>0</w:Zoom>\n<w:TrackMoves>false</w:TrackMoves>\n<w:TrackFormatting></w:TrackFormatting>\n<w:PunctuationKerning></w:PunctuationKerning>\n<w:DrawingGridHorizontalSpacing>18 pt</w:DrawingGridHorizontalSpacing>\n<w:DrawingGridVerticalSpacing>18 pt</w:DrawingGridVerticalSpacing>\n<w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>\n<w:DisplayVerticalDrawingGridEvery>0</w:DisplayVerticalDrawingGridEvery>\n<w:ValidateAgainstSchemas></w:ValidateAgainstSchemas>\n<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>\n<w:IgnoreMixedContent>false</w:IgnoreMixedContent>\n<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>\n<w:Compatibility>\n<w:BreakWrappedTables></w:BreakWrappedTables>\n<w:DontGrowAutofit></w:DontGrowAutofit>\n<w:DontAutofitConstrainedTables></w:DontAutofitConstrainedTables>\n<w:DontVertAlignInTxbx></w:DontVertAlignInTxbx>\n</w:Compatibility>\n</w:WordDocument>\n</xml><![endif]--><!-- [if gte mso 9]><xml>\n<w:LatentStyles DefLockedState=\"false\" LatentStyleCount=\"276\">\n</w:LatentStyles>\n</xml><![endif]-->\n\n<!-- [if gte mso 10]>\n\n<style>\n /* Style Definitions */\ntable.MsoNormalTable\n{mso-style-name:\"Table Normal\";\nmso-tstyle-rowband-size:0;\nmso-tstyle-colband-size:0;\nmso-style-noshow:yes;\nmso-style-parent:\"\";\nmso-padding-alt:0in 5.4pt 0in 5.4pt;\nmso-para-margin:0in;\nmso-para-margin-bottom:.0001pt;\nmso-pagination:widow-orphan;\nfont-size:12.0pt;\nfont-family:\"Times New Roman\";\nmso-ascii-font-family:Cambria;\nmso-ascii-theme-font:minor-latin;\nmso-fareast-font-family:\"Times New Roman\";\nmso-fareast-theme-font:minor-fareast;\nmso-hansi-font-family:Cambria;\nmso-hansi-theme-font:minor-latin;}\n</style><![endif]-->\n\n<!--StartFragment-->\n<h3></h3>\n<h3></h3>\n<!--EndFragment-->",
    "id": 1
},

this is my full json http://artcircuits.com/wp-json/pods/art_places.... use some json online viewer

<ion-view view-title="WYNWOOD ARTS DISTRICT">
<ion-content class="padding" style="background-color: #E5E5E4; color:#8B7447; top:54px">
         <ul class="list" ng-repeat="equis in arreglo">
                <a href="#" class="item " >{{equis.name}}</a>

        </ul>

well i have all my object.. in one $scope.variable... i want to do the next...

FILTER by art_type array property name or index....

Please i need a simple solution... maybe do the filter in controller... or something...

Answer 1

One way to do this is in two steps:

1. "flatten" the object into an array that's easier to filter. (in my example I'm using lodash to do this)
2. use the regular angular filter in the markup.

Here's the example

And here's inline code: HTML:

<div ng-repeat="item in arr | filter: {art_type:filterByArtType}">
  {{item.name}}
</div>

JavaScript:

angular.module('myApp').controller('myCtrl', function($scope) {
  $scope.filterByArtType = 1;
  $scope.obj = {
    "1": {
    "id": 1,
    "name": "Miami City Ballet",
    ...
    "art_type": {
        "1": {
          "name": "Performing Arts"
        }
      }
     ...
    },
     ...
  };

  $scope.arr = _.chain($scope.obj)
    .values()
    .map( function(n) {
      n.art_type = _.keys(n.art_type)[0];
      return n;
    }).value();
});

UPDATE: Now making the flattened array's "art_type" value be the "id" instead of the name.

Answer 2

What you want is the angular built-in filter filter. It can be used in an ng-repeat to restrict which elements of an array are used for generating elements in the DOM, without modifying the source array.

Official angular documentation for filter filter.