AngularJS - parse JSON

Question

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.

<ul>
   <li class="row">
      <ul>
            <li class="photo" id="photo-1A">1A</li>
            <li class="photo" id="photo-1B">1B</li>
            <li class="photo" id="photo-1C">1C</li>
            <li class="photo" id="photo-1D">1D</li>
            <li class="photo" id="photo-2A">2A</li>
            <li class="photo" id="photo-2B">2B</li>
            <li class="photo" id="photo-2C">2C</li>
            <li class="photo" id="photo-2D">2D</li>
            <li class="photo" id="photo-3A">3A</li>
            <li class="photo" id="photo-3B">3B</li>
            <li class="photo" id="photo-3C">3C</li>
            <li class="photo" id="photo-3D">3D</li>
      </ul>
   </li>
</ul>

I have a JSON which includes whether the photo is available or not. Basically the JSON string is something along these lines:

[{"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}]

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.

Edit: Angular Code is this:

<ul class="table-rows">
    <li class="photo-row" ng:repeat="photo in photos" ng:class="'photo-' + photo.row + photo.position">
        <ul class="table-photos">
            <li class="photo photo-available" ng:class="selectedOrNot(photo)" ng:init="photo.selected = false" ng:click="photo.selected = !photo.selected">

         <div class="photo-number">{{photo.row + photo.position}}</div>                          
        </li>                                   
     </ul>                                
  </li>
  <div class="clear"></div>

angular.fromJson(json) returns an object which you can then work with — c0d3junk13
– c0d3junk13, Commented Apr 6, 2014 at 17:18
@c0d3junk13 thanks for your reply. I managed to get the same by using JSON.parse(sessionStorage.seatBookings), however now I am completely stuck on how to go through each one of them and then when i find available=true, I assign the class photo-available to the corresponding <li> — user1809790
– user1809790, Commented Apr 6, 2014 at 17:28
whats stopping your from using "available" as the key and just reading the property value , it's an object after this , you can treat it as such ! — c0d3junk13
– c0d3junk13, Commented Apr 6, 2014 at 22:51

j.wittwer · Accepted Answer · 2014-04-07 04:12:21Z

1

Update3
The reason you are unable to restore previous selections is that you are overwriting the photo's selected property with ng-init:

ng:init="photo.selected = false"
ng-class="{'selected': photo.selected, 'available': photo.available}"

When you combine these two, the 'selected' class will never be added because photo.selected has been hardcoded to false. You just need to remove ng-init, and the previous selection will trigger ng-class to add the correct class.

Here is a working demo: http://plnkr.co/tVdhRilaFfcn55h6mogu

Original answer
If the list of photos is not the same array as the list of available photos, you can use a directive to add the class.

app.directive('availablePhoto', function($filter) {
  return {
    restrict: 'A',
    scope: true,
    link: function(scope, element, attr) {
      var id = attr.id

      var regex = /photo-(.)(.)/g;
      var match = regex.exec(id);

      var row = match[1]
      var position = match[2]

      var photo = $filter('filter')(scope.photos, {row:row, position:position}, false)

      console.log(photo);

      if (photo[0].available) {
        element.addClass('available');
      }
    }
  }
});

Then attach it to each list item like this:

<li class="photo" id="photo-1A" available-photo>1A</li>

Here is a demo: http://plnkr.co/WJCmLf2M39fcUnvOPyNA

Update1

Based on your update, I see that there is just one array populating the list, and it contains the available flag. Therefore, you don't need a custom directive - ngClass will work. Here it is integrated into your code sample:

<ul class="table-rows">
  <li class="photo-row" ng:repeat="photo in photos" ng:class="'photo-' + photo.row + photo.position">
    <ul class="table-photos">
      <li class="photo" ng-class="{'available': photo.available}" ng:init="photo.selected = false" ng:click="photo.selected = !photo.selected">
        <div class="photo-number">{{photo.row + photo.position}}
        </div>                          
      </li>                                   
    </ul>
  </li>
  <div class="clear"></div>  
</ul>

I have update the plunker to demonstrate this.
http://plnkr.co/WJCmLf2M39fcUnvOPyNA

Update2
Since you need ngClass to add multiple classes, use it like this:

ng-class="{'selected': photo.selected, 'available': photo.available}"

Demonstration of selected + available: http://plnkr.co/WJCmLf2M39fcUnvOPyNA

edited Apr 7, 2014 at 4:12

answered Apr 6, 2014 at 17:38

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

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

9 Comments

user1809790 Over a year ago

I have updated my question and included the code generating the <ul> structure. Somehow when I am using your app.directive it is not working for some reason. What I am not understanding is how from having "available-photo" in the <li> basically does the trick. Also, I am not sure what your regex and code actually does. Would be extremely glad if you can give me a quick explanation

j.wittwer Over a year ago

Based on your update, my code isn't necessary because there are not two arrays. I will update in a few minutes.

user1809790 Over a year ago

just to have a better idea, I have uploaded my code here: www.designsconcept.com/cinema so you get a better idea of the actual scenario. The question here is just for a related scenario

user1809790 Over a year ago

basically I still need the ng-class I have. Is it possible to add to it, and have something like: ng:class="selectedOrNot(photo); {'available': photo.available}"? (you can see the thing working here: www.designsconcept.com/cinema . Basically the selectedOrNot puts the highlight state when the user clicks on the seat)

j.wittwer Over a year ago

@user1809790, i wasn't able to open your goo.gl link, but i think i understand that you are trying to apply two classes conditionally using ngClass. please see updated answer.

|

GonchuB · Accepted Answer · 2014-04-06 17:35:45Z

0

Here's a plnkr with an example of how to solve your problem. You need to make use of both the ng-repeat and the ng-class:

http://plnkr.co/edit/hk68qp4yhEjcvOkzmIuL?p=preview

As you can see, I also added some filters for your photos, they will come handy if you need to just show the available ones (for some reason).

Here's the documentation for angular $filter service

edited Apr 6, 2014 at 17:35

answered Apr 6, 2014 at 17:28

GonchuB

7055 silver badges8 bronze badges

2 Comments

user1809790 Over a year ago

I have added my AngularJS which is generating the <ul> structure. FOr some reason when I am adding your code it is not working :( Not sure what I am doing wrong

user1809790 Over a year ago

just to have a better idea, I have uploaded my code here: www.designsconcept.com/cinema so you get a better idea of the actual scenario. The question here is just for a related scenario

dave · Accepted Answer · 2014-04-06 17:38:37Z

0

I think this meets all your requirements:

$scope.photos = JSON.parse('[{"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}]');

and then you can just use ng-repeat to build the list:

<ul>
   <li class="row">
      <ul>
        <li ng-repeat="photo in photos" class="photo" ng-class="{'photo-available': photo.available}" id="photo-{{photo.row}}{{photo.position}}">{{photo.row}}{{photo.position}}</li>
      </ul>
   </li>
</ul>

So what we are doing is we are taking our photo array, and for every one (ng-repeat="photo in photos") we are assigning that specific item to the variable photo. Then, if photo.available is true, we assign the class photo-available (ng-class="{'photo-available': photo.available}").

Then, we can simply interpolate the id and text based off the properties row and position ({{photo.row}}{{photo.position}}). You could also have done that like this {{photo.row + photo.position}} but that could cause issues if they were both numbers.

http://plnkr.co/edit/hBkoyHVtIwF60MKDF84j?p=preview

edited Apr 6, 2014 at 17:38

answered Apr 6, 2014 at 17:33

dave

65.1k6 gold badges81 silver badges98 bronze badges

8 Comments

GonchuB Over a year ago

So... you copied and pasted some code from my Plnkr? I see you have the same filter I added to my answer but you are not using it... Not cool man.

dave Over a year ago

Yeah I wanted a Plnkr with angular set up, it's not like I stole your answer.

GonchuB Over a year ago

You took my answer and trimmed some extra filters I added in case he needed them.

dave Over a year ago

No, you deleted your post, modified your plnkr, and then undeleted your post. Yours didn't have ng-class at all when I did mine

dave Over a year ago

In fact, plnkr lets you see revisions, so go ahead and click on either of the first two versions. Kind of looks like you actually copied from mine

|

Collectives™ on Stack Overflow

AngularJS - parse JSON

3 Answers 3

9 Comments

2 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related