title: AngularJS - parse JSON
body: <p>I have a list of photographs being generated like the following snippet.  Basically this would render a table like structure, with each photo being like a cell in this table.  The ID of each photo like for example 1D means that the photo is in the first row of the table and in the 4th/D column.</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li class="row"&gt;
        &lt;ul&gt;
              &lt;li class="photo" id="photo-1A"&gt;1A&lt;/li&gt;
              &lt;li class="photo" id="photo-1B"&gt;1B&lt;/li&gt;
              &lt;li class="photo" id="photo-1C"&gt;1C&lt;/li&gt;
              &lt;li class="photo" id="photo-1D"&gt;1D&lt;/li&gt;
              &lt;li class="photo" id="photo-2A"&gt;2A&lt;/li&gt;
              &lt;li class="photo" id="photo-2B"&gt;2B&lt;/li&gt;
              &lt;li class="photo" id="photo-2C"&gt;2C&lt;/li&gt;
              &lt;li class="photo" id="photo-2D"&gt;2D&lt;/li&gt;
              &lt;li class="photo" id="photo-3A"&gt;3A&lt;/li&gt;
              &lt;li class="photo" id="photo-3B"&gt;3B&lt;/li&gt;
              &lt;li class="photo" id="photo-3C"&gt;3C&lt;/li&gt;
              &lt;li class="photo" id="photo-3D"&gt;3D&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have a JSON which includes whether the photo is available or not.  Basically the JSON string is something along these lines:</p>
  
  <pre><code>[{"row":1,"position":"A","available":true},{"row":1,"position":"B","available":false},{"row":1,"position":"C","available":false},{"row":1,"position":"D","available":false},{"row":2,"position":"A","available":true},{"row":2,"position":"B","available":false},{"row":2,"position":"C","available":false},{"row":2,"position":"D","available":false},{"row":3,"position":"A","available":true},{"row":3,"position":"B","available":false},{"row":3,"position":"C","available":false},{"row":3,"position":"D","available":false}]
  </code></pre>
  
  <p>Now basically what I need to do is to parse this JSON string and when any of these photos have "available:true" in the JSON string, I add a class photo-available in the HTML.  I am new to angular and I am not sure if there is an easy way to assign a class to the available photos.  Would be glad if someone can tell me what to use or how to do it.</p>
  
  <p>Edit: Angular Code is this:</p>
  
  <pre><code>&lt;ul class="table-rows"&gt;
      &lt;li class="photo-row" ng:repeat="photo in photos" ng:class="'photo-' + photo.row + photo.position"&gt;
          &lt;ul class="table-photos"&gt;
              &lt;li class="photo photo-available" ng:class="selectedOrNot(photo)" ng:init="photo.selected = false" ng:click="photo.selected = !photo.selected"&gt;
  
           &lt;div class="photo-number"&gt;{{photo.row + photo.position}}&lt;/div&gt;                          
          &lt;/li&gt;                                   
       &lt;/ul&gt;                                
    &lt;/li&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;                          
  </code></pre>
  
  <p></p>