Manipulating JSON data with Angular's conditional styling

Question

Manipulating JSON data with Angular's conditional styling

Looking to convert my small jquery app into AngularJs, seeking advice on the feasibility of doing so. Currently, the app makes ajax calls to retrieve Json data which is then parsed and displayed in the dom.

The challenge lies in the variety of json properties - simple strings, arrays, or nested objects. When parsing the Json, I format it accordingly - creating tables for arrays, calculating string lengths, and outputting the results to the dom.

While achievable with jquery, the process is somewhat verbose. Curious to know if a similar functionality can be replicated using AngularJs.

$.each(data.ALLIMG, function(i, image) {
    if(image.alt){
        $("#imagesDetail").append("<li>ALT:" + image.alt + " SRC: ");
        $("#imagesDetail").append(image.src + "</li>");
        totalAltImg++;
    }
});
$("#text").append("<p>" + data.TEXT + "</p>");
$("#text").append("<p><b>Length: </b>" + data.TEXT.LENGTH + " character(s)</p>");

In angular syntax, it seems like I should use something like {{text}}. But how do I handle arrays to display as tables or lists?

javascript angularjs

Answer 1

Answer №1

In this illustration, you will find a complete working example showcasing how to utilize the ng-show directive for testing the presence of a property. Although in this instance, it renders hidden, it offers a simpler alternative to using a filter. Additionally, a straightforward demonstration of a filter has been provided. I made an assumption that you wished to calculate the character count of the data.TEXT.

To view the demonstration, visit: http://plnkr.co/br2M4GXrDENd4rLkDBho

<!-- Utilizing ngshow -->
<ul id="imagesDetail">
  <li ng-repeat="image in data.ALLIMG" ng-show="image.alt">
     ALT: {{image.alt}} SRC: {{image.src}}
  </li>
</ul>
<!-- Implementation with filter outlined below -->
<ul id="imagesDetail2">
  <li ng-repeat="image in data.ALLIMG | filter:hasAlt" >
    ALT: {{image.alt}} SRC: {{image.src}}
  </li>
</ul>

<div id="text">
  <p>{{data.TEXT}}</p>
  <p><b>Length: </b> + {{data.TEXT.length}} character(s)</p>
</div>

The controller filter is as follows:

 $scope.hasAlt = function(image) {
  return image.alt!==undefined;
 }

Answer 2

In this illustration, you will find a complete working example showcasing how to utilize the ng-show directive for testing the presence of a property. Although in this instance, it renders hidden, it offers a simpler alternative to using a filter. Additionally, a straightforward demonstration of a filter has been provided. I made an assumption that you wished to calculate the character count of the data.TEXT.

To view the demonstration, visit: http://plnkr.co/br2M4GXrDENd4rLkDBho

<!-- Utilizing ngshow -->
<ul id="imagesDetail">
  <li ng-repeat="image in data.ALLIMG" ng-show="image.alt">
     ALT: {{image.alt}} SRC: {{image.src}}
  </li>
</ul>
<!-- Implementation with filter outlined below -->
<ul id="imagesDetail2">
  <li ng-repeat="image in data.ALLIMG | filter:hasAlt" >
    ALT: {{image.alt}} SRC: {{image.src}}
  </li>
</ul>

<div id="text">
  <p>{{data.TEXT}}</p>
  <p><b>Length: </b> + {{data.TEXT.length}} character(s)</p>
</div>

The controller filter is as follows:

 $scope.hasAlt = function(image) {
  return image.alt!==undefined;
 }

Answer 3

Answer №2

This should be displayed as follows:

<ul>
  <li ng-repeat='picture in data.ALLIMG'> ALT: {{picture.alt}} {{picture.src}}</li>
</ul>

In case you need to eliminate incorrect data (similar to what is shown in your example), you can set up a filter condition in your controller:

<ul>
  <li ng-repeat='picture in data.ALLIMG| filter:properPictures'> 
     ALT: {{picture.alt}} {{picture.src}}</li>
</ul>

Answer 4

This should be displayed as follows:

<ul>
  <li ng-repeat='picture in data.ALLIMG'> ALT: {{picture.alt}} {{picture.src}}</li>
</ul>

In case you need to eliminate incorrect data (similar to what is shown in your example), you can set up a filter condition in your controller:

<ul>
  <li ng-repeat='picture in data.ALLIMG| filter:properPictures'> 
     ALT: {{picture.alt}} {{picture.src}}</li>
</ul>

Manipulating JSON data with Angular's conditional styling

Answer №1

Answer №2

Similar questions

Manipulating DropDownList Attributes in ASP.NET using JavaScript

Deleting an element from an array renders the iterator invalid

Choose a collection of elements and encase them within a <div> tag

What is the best way to make one page disappear and replace it with a pop-up from

Maintain the state of the previous page in Vue to ensure continuity

Verifying the authenticity of a Stripe discount code

JavaScript API for Tableau

Failing to complete a field in the form does not generate an error message when submitted [AngularJS]

Typescript: Ways to fix the error 'rxjs/Rx does not have any exported member 'SubscriptionLike'

Issues with the initial drop functionality in jQuery UI

Include a class in ul > li elements upon page load in Angular4

Stop the form from submitting when the Enter key is pressed

Unable to receive parameters in Java Servlet POST request action

The Bootstrap carousel feature allows you to track the duration each image is displayed

React Alert: Please be advised that whitespace text nodes are not allowed as children of <tr> elements

Unable to execute query with $gt and $size in Mongoose

Error message indicating that the preflight request failed access control check in Angular 5 with JWT OAuth integration

The React.js search feature consistently retrieves identical content every time

Is there a way to retrieve a particular object from the state and access one of its elements?

Executing a JavaScript function when a column in a Fusion Chart is clicked