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

Complete API Integration with Diverse Models for Android Development

The ng-route feature seems to be malfunctioning and I am unable to identify the error, as no information is being displayed in the console

Encountering a "Raphael is undefined" error message when working with Treant.js

Executing multiple nested `getJSON` requests in a synchronous manner using jQuery

Guide on implementing a date selector for each button/option clicked using Vue.js

The error encountered is: "TypeError: req.flash does not exist as a function in NodeJs

Ensuring the correctness of phone numbers by validating them with country codes through the use of

Transferring binary data from C# to Node.js for deserialization

Invoke the URL with a query string and obtain the response from the specified web page

Retrieve the Javascript variable and assign it to a PHP variable

When executed on the node REPL, lodash.sortBy will update the lodash value

Adding to a JSON file in PHP: A step-by-step guide

When attempting to input data into the database, an error is displayed stating that /test.php cannot be POSTed

How can I change the background color of a parent div when hovering over a child element using JavaScript

Optimal Method for Organizing Items in Express.js Using Mongodb

It is not possible to transfer information to a JSON document using node.js filesystem and browserify

Exploring the world of routing parameters in Express.js and AngularJS

ng-include once the application has finished loading

Is there a way to render a component without having to render AppComponent constantly?

Exploring the benefits of utilizing express-session for authentication management