How to display a variety of JSON data in different templates with unique variables using angularjs

Question

How to display a variety of JSON data in different templates with unique variables using angularjs

I am curious about the best approach to handling a response that contains various types of objects presented like this:

[
{"nodeClass":"Entity", "text":"foo","entityfield":"booz"},
{"nodeClass":"User","username":"bar","userfield":"baz"}
]

Each type of object requires its own template:

For Entities:

<div class="{{nodeClass}} capsule">{{entity.text}}:{{entity.entityfield}}</div>

For Users:

<div class="{{nodeClass}} capsule">{{user.username}}:{{user.userfield}}</div>

How can I structure the code using AngularJS elements (such as ng-repeat) to dynamically use the correct templates based on the value of "nodeClass"? It's important not to create new conditional templates unless absolutely necessary.

Edit: I have come across these resources: and if else statement in AngularJS templates and Dynamically displaying template in ng-repeat directive in AngularJS? However, they don't quite meet my specific requirements. The last one comes close, but my templates often include different variable names.

Thank you!

javascript json angularjs

Answer 1

Answer №1

One method involves utilizing a dynamically created ng-include URL

Markup

  <div ng-repeat="item in data">
    <div ng-include="getContentUrl(item.nodeClass)"></div>
  </div>

Templates

  <script type="text/ng-template" id="partials/Entity.html">
    <h3>Entity Template , text= {{item.text}}</h3>
  </script>
  <script type="text/ng-template" id="partials/User.html">
    <h3>User Template , username ={{item.username}}</h3>
  </script>

JavaScript

app.controller('MainCtrl', function($scope) {
  $scope.data=[{"nodeClass":"Entity", "text":"foo"},{"nodeClass":"User","username":"bar"}];
  $scope.getContentUrl = function(nodeClass){
    return 'partials/'+nodeClass +'.html';
  }
});

VIEW DEMONSTRATION

Answer 2

One method involves utilizing a dynamically created ng-include URL

Markup

  <div ng-repeat="item in data">
    <div ng-include="getContentUrl(item.nodeClass)"></div>
  </div>

Templates

  <script type="text/ng-template" id="partials/Entity.html">
    <h3>Entity Template , text= {{item.text}}</h3>
  </script>
  <script type="text/ng-template" id="partials/User.html">
    <h3>User Template , username ={{item.username}}</h3>
  </script>

JavaScript

app.controller('MainCtrl', function($scope) {
  $scope.data=[{"nodeClass":"Entity", "text":"foo"},{"nodeClass":"User","username":"bar"}];
  $scope.getContentUrl = function(nodeClass){
    return 'partials/'+nodeClass +'.html';
  }
});

VIEW DEMONSTRATION

Answer 3

Answer №2

If you want to dynamically update a template in your application, one approach is to fetch the `template.html` in the background using `$http`, parse it, and replace instances of variable names that don't match your `ng-repeat` variable name. Then, pass this edited HTML to a directive or controller template that contains the `ng-repeat` in its template. You can insert the modified HTML using `$('#elem').html(newHtml);` and then invoke `$compile` on the updated element.

For example, consider the template you retrieve:

controller1/template1.html

<h1>{{item.data}} - {{item.name}}</h1>

And the template where the repeater exists:

controller1.html

<p>This is the view for controller 1.</p>

<div id="repeater" ng-repeat="thing in vm.items">

</div>

The process of fetching the template, replacing the desired strings, and recompiling the template can be done as follows:

controller1.js

function Controller1($scope, $http) {
    var vm = this;

    vm.items = [{name: 'item1', data: 123}, {name: 'item2', data: 456}];

    var templateReplacement = '{{thing.';
    $http.get('controller1/template1.html')
        .then(function success(response) {
            var newHtml = response.data.replace(/{{item./g, templateReplacement);
            var repeaterElem = $('#repeater');

            $(repeaterElem[0]).html(newHtml);

            $compile(repeaterElem)($scope);
    }, function failure(reason) {
            console.log(reason);
    });
}

You can see an example of this implementation in action with this Plunk demo.

Answer 4

If you want to dynamically update a template in your application, one approach is to fetch the `template.html` in the background using `$http`, parse it, and replace instances of variable names that don't match your `ng-repeat` variable name. Then, pass this edited HTML to a directive or controller template that contains the `ng-repeat` in its template. You can insert the modified HTML using `$('#elem').html(newHtml);` and then invoke `$compile` on the updated element.

For example, consider the template you retrieve:

controller1/template1.html

<h1>{{item.data}} - {{item.name}}</h1>

And the template where the repeater exists:

controller1.html

<p>This is the view for controller 1.</p>

<div id="repeater" ng-repeat="thing in vm.items">

</div>

The process of fetching the template, replacing the desired strings, and recompiling the template can be done as follows:

controller1.js

function Controller1($scope, $http) {
    var vm = this;

    vm.items = [{name: 'item1', data: 123}, {name: 'item2', data: 456}];

    var templateReplacement = '{{thing.';
    $http.get('controller1/template1.html')
        .then(function success(response) {
            var newHtml = response.data.replace(/{{item./g, templateReplacement);
            var repeaterElem = $('#repeater');

            $(repeaterElem[0]).html(newHtml);

            $compile(repeaterElem)($scope);
    }, function failure(reason) {
            console.log(reason);
    });
}

You can see an example of this implementation in action with this Plunk demo.

Answer 5

Answer №3

In order to customize the data from the service before it is rendered on the view, I utilize ng-if to selectively display HTML elements:

<div ng-repeat="data in dataset">
  <div
    class="capsule"
    ng-class="data.nodeClass"
    ng-bind="data.text"
    ng-if="data.nodeClass==='Entity'"></div>
  <div
    class="capsule"
    ng-class="data.nodeClass"
    ng-bind="data.username"
    ng-if="data.nodeClass==='User'"></div>
</div>

Click here for a modified version on Plunker Created by tpie

Answer 6

In order to customize the data from the service before it is rendered on the view, I utilize ng-if to selectively display HTML elements:

<div ng-repeat="data in dataset">
  <div
    class="capsule"
    ng-class="data.nodeClass"
    ng-bind="data.text"
    ng-if="data.nodeClass==='Entity'"></div>
  <div
    class="capsule"
    ng-class="data.nodeClass"
    ng-bind="data.username"
    ng-if="data.nodeClass==='User'"></div>
</div>

Click here for a modified version on Plunker Created by tpie

Answer 7

Answer №4

I developed a custom directive that accepts two attributes - one for defining the template and the other for passing relevant data to the template.

The template selector value is passed through a switch statement to determine the appropriate template and organize the data accordingly. Example Link

Custom Directive:

app.directive('templateSelector', function($compile) {
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, el, attr) {
      console.log(attr.tClass, attr.tVals)
      var template ='';
      scope.data = angular.fromJson(attr.tVals);
      switch (attr.tClass) {
        case 'Entity':
          template = '<div><h1>Entity Class Template</h1>{{data.text}}</div><hr/>';
          break;
        case 'User':
          template = '<div><h1>User Class Template</h1>{{data.username}}</div><hr/>';
          break;
      }
      $template = angular.element(template);
      $compile($template)(scope);
      el.append($template); 
    }  
  }
})

HTML Usage:

<div ng-repeat="d in dataset">
    <div template-selector t-class="{{d.nodeClass}}" t-vals="{{d}}"></div>      
</div>

Answer 8

I developed a custom directive that accepts two attributes - one for defining the template and the other for passing relevant data to the template.

The template selector value is passed through a switch statement to determine the appropriate template and organize the data accordingly. Example Link

Custom Directive:

app.directive('templateSelector', function($compile) {
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, el, attr) {
      console.log(attr.tClass, attr.tVals)
      var template ='';
      scope.data = angular.fromJson(attr.tVals);
      switch (attr.tClass) {
        case 'Entity':
          template = '<div><h1>Entity Class Template</h1>{{data.text}}</div><hr/>';
          break;
        case 'User':
          template = '<div><h1>User Class Template</h1>{{data.username}}</div><hr/>';
          break;
      }
      $template = angular.element(template);
      $compile($template)(scope);
      el.append($template); 
    }  
  }
})

HTML Usage:

<div ng-repeat="d in dataset">
    <div template-selector t-class="{{d.nodeClass}}" t-vals="{{d}}"></div>      
</div>

How to display a variety of JSON data in different templates with unique variables using angularjs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Display or conceal a div based on the size of the screen using HTML and CSS

Issue encountered while attempting to retrieve data from a local json file due to Cross-Origin Resource Sharing

Navigate to a new tab using this.router.navigate

Recreating dropdown menus using jQuery Clone

Javascript function to deselect all items

Steps for correctly invoking a function based on input value conditions

Send an array of JSON objects representing table rows to an MVC controller

Failed Attempt to Execute React Native Application using Command Prompt (iOS)

Having trouble with my React App compiling media files

Get rid of any empty space in the image preview icon

The correct method for accessing descendants in THREE.js in the latest version, r68

Unable to utilize the resolved value received from a promise and returned from it

Activate the "order evaluation" trigger on the checkout page in Woocommerce

What is the best way to convert a JSON array into a PostgreSQL array type?

How does the Rx subscribe function maintain its context without the need to explicitly pass it along

Tips for accessing the information received from an AJAX call

Basic HTML code that displays either one or two columns based on the width of the screen

What are the steps for importing KnockOut 4 in TypeScript?

following the history.back() function call, the subsequent codes are executed

When trying to locate an item in an array within a VUE application, it may result in