How can we display AngularJS and XML content together effectively?

Question

How can we display AngularJS and XML content together effectively?

Currently collaborating with the database team, who are providing data via XML format. My task is to display different elements in the view based on their specifications.

The following code represents a dynamic table:


      <table>
        <thead>
          <tr>
            <th ng-repeat="column in cols">
              <span>{{column}}</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in rows">
            <td ng-repeat="column in cols"
                ng-init="isXX = column.indexOf('XX') === 0">
              <span ng-if="!isXX">{{row[column]}}</span>
              <button ng-if="isXX" class="btn btn-xs btn-blue"
                      ng-click="fillOpen()">
                  {{column.substring(3).replace('_', ' ')}}
              </button>
            </td>
          </tr>
        </tbody>
      </table>

Below is the controller snippet:


    ReportsFactory.pendingBets(reportParam).then(function(data) {
      if (data.length) {
        gridInfo = _.forEach(data, function(item) {return item;});
        $scope.rows = gridInfo;
        $scope.cols = Object.keys($scope.rows[0]);
      }
    }

In the above code snippet, ng-init specifies whether an element should be displayed as a button or not depending on the property received

I have also included a screenshot of the current view:

https://i.sstatic.net/WYf5s.png

My question is regarding how to interpret the provided XML:

[{ BET: 57635034,
  CUSTOMER: 181645,
  SPORT: 'NFL',
  'XX_FILL OPEN': '<element><element_type>WAGER_ACTION_BUTTON</element_type><element_call>fillOpen(57635034)</element_call><element_content/></element>',
  XX_VIEW: '<element><element_type>BASIC_DROPDOWN</element_type><element_call>callThisFunction()</element_call><element_content><li>1</li><li>2</li><li>3</li><li>4</li></element_content></element>',
  XX_CANCEL: '<element><element_type>BASIC_CHECKBOX</element_type><element_call/><element_content>1</element_content></element>'
}]

The XML dictates the type of HTML element to display - for example, a button for WAGER_ACTION_BUTTON and a dropdown for BASIC_DROPDOWN. Any suggestions on how to dynamically generate the correct HTML element based on this information?

Looking forward to your input!

javascript xml angularjs

Answer 1

Answer №1

It seems like you're looking to dynamically render XML or HTML content in your view. Assuming that "element" and "element type" are directives you have.

You can use the ngBindHtml directive, for example:

<div class="col-xs-offset-1 m-r-offset-8 p-t-offset-2 font-l-16">
<span mathjax-bind ng-bind-html="question.question.body"></span>
</div>

Or you could also utilize the trustAsHtml function:

<div class="col-xs-offset-1 m-r-offset-8 p-t-offset-2 font-l-16">
<span mathjax-bind ng-bind-html="trustAsHtml(question.question.body)"></span>
</div>

$scope.trustAsHtml = function (val) {
return $sce.trustAsHtml(val);
};

This will render your XML or HTML code as expected. Additionally, you can create a custom directive and use $compile as follows:

app.directive('ngHtmlCompile',function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.ngHtmlCompile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);

// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
});

Simply call the ng-html-compile directive in your code - no need for $sce.

Answer 2

It seems like you're looking to dynamically render XML or HTML content in your view. Assuming that "element" and "element type" are directives you have.

You can use the ngBindHtml directive, for example:

<div class="col-xs-offset-1 m-r-offset-8 p-t-offset-2 font-l-16">
<span mathjax-bind ng-bind-html="question.question.body"></span>
</div>

Or you could also utilize the trustAsHtml function:

<div class="col-xs-offset-1 m-r-offset-8 p-t-offset-2 font-l-16">
<span mathjax-bind ng-bind-html="trustAsHtml(question.question.body)"></span>
</div>

$scope.trustAsHtml = function (val) {
return $sce.trustAsHtml(val);
};

This will render your XML or HTML code as expected. Additionally, you can create a custom directive and use $compile as follows:

app.directive('ngHtmlCompile',function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.ngHtmlCompile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);

// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
});

Simply call the ng-html-compile directive in your code - no need for $sce.

How can we display AngularJS and XML content together effectively?

Answer №1

Similar questions

Real-time port communication using PHP and C++

The git clone operation encounters a problem with the error message: unable to connect, connection refused on localhost port 80

What are some ways to improve the efficiency of my login system?

Using Angular's ng-repeat directive to iterate over a list of <li> elements containing strings with

Custom components receive specific values through Styled Components

Unexpected token ')' in Unity Javascript: expecting '{' but found 'EOF'

What is the quickest method to identify duplicate entries within a JavaScript array?

Transferring Data from Angular Application to Spring Server via Rest Implementation

Dealing with a 409 conflict situation involving a document in Node.js using Nano library

Immersive animations with Chart.js

clearing all input fields upon submission in React Native

What factors cause variations in script behavior related to the DOM across different browsers?

In Next.js, the Typescript compiler does not halt when an error occurs

Is there a way for me to identify the value within useCallback without any intermediaries?

Guide to altering the color of an href element when clicked using Jquery

Activate the action using the onclick interaction

Exploring the contrast: State data versus destructuring in React

Issue with JavaScript removeAttribute for the "readonly" attribute not functioning as expected

Validate the Start and Finish Date in a DatePicker without the need for a plugin

Inquiry regarding the process of object creation in JavaScript