Unveiling the Power of AngularJS for Parsing JSON Data

Question

Unveiling the Power of AngularJS for Parsing JSON Data

A list of images is being generated in a table-like structure using the code snippet below. Each image represents a cell in this table, with its ID specifying its row and column position.

<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 object that indicates whether each photo is available or not. The JSON string contains information like:

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

To highlight the available photos in the HTML, I need to parse this JSON and add a class of "photo-available" if the "available" property is true. Being new to Angular, I'm unsure about how to achieve this easily. Any guidance on what methods or directives to use would be appreciated.

Edit: The Angular code snippet for reference:

<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>

javascript json angularjs angularjs-ng-repeat

Answer 1

Answer №1

Latest Update
If you are facing difficulties in restoring previous selections, it might be due to the fact that you are overwriting the selected property of the photo using ng-init:

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

By setting photo.selected to false with ng-init, the 'selected' class will not be applied because of this hardcoded value. Simply removing ng-init should allow ng-class to function correctly and add the appropriate class for previous selections.

You can see a functional demonstration here: http://plnkr.co/tVdhRilaFfcn55h6mogu

Initial Solution
In case your list of photos is different from the available photos array, you can utilize a custom directive to apply the necessary 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');
      }
    }
  }
});

To implement this directive, simply attach it to each list item as shown below:

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

For a live demo, check out: http://plnkr.co/WJCmLf2M39fcUnvOPyNA

Recent Updates

After reviewing your latest update, it appears that there is only one array populating both the list and the availability status. Therefore, utilizing ngClass directly without a custom directive should suffice. Here's how you can integrate it into your code snippet:

<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>

The plunker has been updated to showcase this functionality.
http://plnkr.co/WJCmLf2M39fcUnvOPyNA

Additional Update
To handle multiple classes with ngClass, use the following syntax:

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

See an illustration combining selected and available classes here: http://plnkr.co/WJCmLf2M39fcUnvOPyNA

Answer 2

Latest Update
If you are facing difficulties in restoring previous selections, it might be due to the fact that you are overwriting the selected property of the photo using ng-init:

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

By setting photo.selected to false with ng-init, the 'selected' class will not be applied because of this hardcoded value. Simply removing ng-init should allow ng-class to function correctly and add the appropriate class for previous selections.

You can see a functional demonstration here: http://plnkr.co/tVdhRilaFfcn55h6mogu

Initial Solution
In case your list of photos is different from the available photos array, you can utilize a custom directive to apply the necessary 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');
      }
    }
  }
});

To implement this directive, simply attach it to each list item as shown below:

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

For a live demo, check out: http://plnkr.co/WJCmLf2M39fcUnvOPyNA

Recent Updates

After reviewing your latest update, it appears that there is only one array populating both the list and the availability status. Therefore, utilizing ngClass directly without a custom directive should suffice. Here's how you can integrate it into your code snippet:

<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>

The plunker has been updated to showcase this functionality.
http://plnkr.co/WJCmLf2M39fcUnvOPyNA

Additional Update
To handle multiple classes with ngClass, use the following syntax:

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

See an illustration combining selected and available classes here: http://plnkr.co/WJCmLf2M39fcUnvOPyNA

Answer 3

Answer №2

Check out this plnkr I created to help address your issue. This solution utilizes both the ng-repeat and ng-class:

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

In addition, I incorporated some filters for your photos that can be helpful if you only want to display certain ones. Take a look!

For more information on angular's filtering capabilities, see the $filter service documentation.

Answer 4

Check out this plnkr I created to help address your issue. This solution utilizes both the ng-repeat and ng-class:

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

In addition, I incorporated some filters for your photos that can be helpful if you only want to display certain ones. Take a look!

For more information on angular's filtering capabilities, see the $filter service documentation.

Answer 5

Answer №3

Here is a solution that should fit all of your criteria:

$scope.images = JSON.parse('[{"row":1,"position":"A","available":true},{"row":1,"position":"B","available":false}, ... {"row":3,"position":"D","available":false}]');

You can then utilize ng-repeat to generate the list:

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

This code loops through the image array and assigns each element to the variable image. If image.available is true, it adds the class photo-available to that item.

The ID and text for each item are generated based on their row and position properties ({{image.row}}{{image.position}}). You could also concatenate them with a plus sign like this: {{image.row + image.position}}, but be cautious if they are both numerical values.

http://plnkr.co/edit/abc123xyz987

Answer 6

Here is a solution that should fit all of your criteria:

$scope.images = JSON.parse('[{"row":1,"position":"A","available":true},{"row":1,"position":"B","available":false}, ... {"row":3,"position":"D","available":false}]');

You can then utilize ng-repeat to generate the list:

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

This code loops through the image array and assigns each element to the variable image. If image.available is true, it adds the class photo-available to that item.

The ID and text for each item are generated based on their row and position properties ({{image.row}}{{image.position}}). You could also concatenate them with a plus sign like this: {{image.row + image.position}}, but be cautious if they are both numerical values.

http://plnkr.co/edit/abc123xyz987

Unveiling the Power of AngularJS for Parsing JSON Data

Answer №1

Answer №2

Answer №3

Similar questions

When utilizing KineticJS on a canvas that has been rotated with css3, the functionality of the events appears to be malfunctioning

The problem arises when Angular's $interval function is not recognized

Troubleshooting Next.js 13: Issues with Error and Not Found Pages Rendering Incorrectly

Find all the different ways that substrings can be combined in an array

The functionality of the Ajax form is limited to a single use

Angular: Using ng-blur to toggle visibility between elements

Steps to Create an HTML Text Box that cannot be clicked

I am seeking the original XML element with the exact tagName, including proper case sensitivity

Downloading EJS File instead of Displaying on Express.js Router

What is the best way to transfer information from a service to my controller?

Unclear error message encountered with Rails server

The files fail to respond after executing npm and initiating npm starts

Make sure to always select the alternative option in ajax

Assign the chosen item once the information has been retrieved from the server

Exploring AngularJS capabilities: iterating over a collection of objects generated by a method

Receiving an inaccurate value from the input with type='number' attribute

Create a POST request to the server using Express.js

Setting the state based on Promise values within a loop

Dayjs is failing to retrieve the current system time

What is the process for getting the input value when a key is released?