Calling single result from JSON with angular

Question

I'm trying to use json to populate an html page with angular, right now I have this as my JSON:

  [{"listType":"custprof", "prof":"Turkish Government"},
  {"listType":"custprof", "prof":"Eren Isaat"},
  {"listType":"custprof", "prof":"Mardin, Turkey"},
  {"listType":"custprof", "prof":"Canal Irigation channel"},
  {"listType":"situation","sit":"Grade Checking limited to working day"},
  {"listType":"situation", "sit":"5 grade checkers per machine"},
  {"listType":"situation","sit":"Terrain slows accurate grading"},
  {"listType":"situation", "sit":"Fine grading requierd multiple passes"},
  {"finalImage":"img", "foo":"imgname"}]

and here is my html code

 <div ng-repeat="case in case_select" ng-show="case.listType =='custprof'" >
<ul>
  <li >{{case.prof}}</li>
</ul>
</div>
<h1>Situation</h1>
 <div ng-repeat="case in case_select" ng-show="case.listType== 'situation'">
<ul>
  <li>{{case.sit}}</li>
</ul>
</div>
</div>
</div>

Right now I'm using ng-repeat along with ng-show to get specific strings from the JSON file. I am wondering if there is a better/more direct way of returning a specific result from the JSON, rather then looping through the entire thing and hiding specific items. For instance maybe something that looks like this:

 <div>{{case.finalImage.foo}}</div>

That is exactly how you would do it... have you tried it out? — Christopher Marshall
– Christopher Marshall, Commented Feb 3, 2014 at 20:12
Yes, and it works. But I'm wondering if there is a simpler way to achieve the same result. Also the method I have above doesn't ignore the unwanted JSON, it still places them within the html but it sets the display to none, which seems like bad coding to me. @ChristopherMarshall — Joe Komputer
– Joe Komputer, Commented Feb 3, 2014 at 20:15
Check out @Blazemonger's suggestion. I have a previous question about filters if you're interested. — Christopher Marshall
– Christopher Marshall, Commented Feb 3, 2014 at 20:18
Filter definitely works better, since it doesn't compile the unwanted JSON like ng-show does. Thanks for the advice! — Joe Komputer
– Joe Komputer, Commented Feb 3, 2014 at 20:24

Blazemonger · Accepted Answer · 2014-02-03 20:30:17Z

2

Perhaps a filter?

 <div ng-repeat="case in case_select | filter: {listType:custprof}" >
<ul>
  <li >{{case.prof}}</li>
</ul>
</div>
<h1>Situation</h1>
 <div ng-repeat="case in case_select | filter: {listType:situation}">
<ul>
  <li>{{case.sit}}</li>
</ul>
</div>

answered Feb 3, 2014 at 20:30

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

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

Collectives™ on Stack Overflow

Calling single result from JSON with angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related