Error: Angular does not recognize x2js XML format

Question

Error: Angular does not recognize x2js XML format

I'm attempting to adapt this particular example to utilize xml as json data. However, I am encountering some issues with the code.

courses  = x2js.xml_str2json(data);
console.log(courses.books.course);
$scope.todos = courses.books.course;

In the XML of the example, there are 'books' and 'course' tags. But I am unsure where 'courses' is coming from.

I am trying to replicate this example using the following XML:

<diffgr:diffgram xmlns:msdata="urn:schemas-microsoft-com:xml-msdata" xmlns:diffgr="urn:schemas-microsoft-com:xml-diffgram-v1">
 <DocumentElement xmlns="">
  <semt_kodlari diffgr:id="semt_kodlari1" msdata:rowOrder="0">
   <semt_adi>ALTIKAT</semt_adi>
  </semt_kodlari>
 </DocumentElement>
</diffgr:diffgram>

Here is my HTML snippet:

X = x2js.xml_str2json(data);
console.log(X.DocumentElement.semt_kodlari);
$scope.todos = X.DocumentElement.semt_kodlari;

Upon running this code, I encounter a "Cannot read property 'semt_kodlari' of undefined" error. Could someone please point out what may be wrong in my code and clarify the distinction between 'course' and 'course's'?

javascript xml angularjs

Answer 1

Answer №1

It seems that you are just missing one parent element for your object. Try adding diffgram to your console.log and everything should function as intended.

For a demonstration, please refer to the example below or visit it on jsfiddle.

        var todoApp = angular.module('todosApp', []);

        todoApp.factory('todoFactory', function ($http) {
            var factory = {};

            factory.getTodos = function () {
                return $http.get("http://cdn.rawgit.com/motyar/bcf1d2b36e8777fd77d6/raw/bfa8bc0d2d7990fdb910927815a40b572c0c1078/out.xml");
            }

            return factory;
        });
        todoApp.factory('getXMLDataFactory', function() {
            
            var x2js = new X2JS(),
                xml = '<diffgr:diffgram xmlns:msdata="urn:schemas-microsoft-com:xml-msdata" xmlns:diffgr="urn:schemas-microsoft-com:xml-diffgram-v1">'+
 '<DocumentElement xmlns="">'+
  '<semt_kodlari diffgr:id="semt_kodlari1" msdata:rowOrder="0">'+
   '<semt_adi>ALTIKAT</semt_adi>'+
  '</semt_kodlari>'+
 '</DocumentElement>'+
'</diffgr:diffgram>';
            console.log(xml, x2js);
            
            return {
                get: function() { 
                    return x2js.xml_str2json(xml);
               }
            };         
        });
        todoApp.controller('todosCtrl', function ($scope, todoFactory, getXMLDataFactory) {

            $scope.todos = [];
            //loadTodos();
            loadData();
            
            function loadTodos() {
                todoFactory.getTodos().success(function (data) {
                    console.log(data);
                    courses = x2js.xml_str2json(data);
                    console.log(courses.books.course);
                    $scope.todos = courses.books.course;
                });
            }
            
            function loadData() {
                console.log('test');
                $scope.todos = getXMLDataFactory.get()
                    .diffgram.DocumentElement.semt_kodlari;
                console.log($scope.todos);
            }
        });

<script src="http://demos.amitavroy.com/learningci/assets/js/xml2json.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="todosApp" ng-controller="todosCtrl">
     <h2>Parsing XML data with AngularJS</h2>
    {{todos|json}}
</div>

Answer 2

It seems that you are just missing one parent element for your object. Try adding diffgram to your console.log and everything should function as intended.

For a demonstration, please refer to the example below or visit it on jsfiddle.

        var todoApp = angular.module('todosApp', []);

        todoApp.factory('todoFactory', function ($http) {
            var factory = {};

            factory.getTodos = function () {
                return $http.get("http://cdn.rawgit.com/motyar/bcf1d2b36e8777fd77d6/raw/bfa8bc0d2d7990fdb910927815a40b572c0c1078/out.xml");
            }

            return factory;
        });
        todoApp.factory('getXMLDataFactory', function() {
            
            var x2js = new X2JS(),
                xml = '<diffgr:diffgram xmlns:msdata="urn:schemas-microsoft-com:xml-msdata" xmlns:diffgr="urn:schemas-microsoft-com:xml-diffgram-v1">'+
 '<DocumentElement xmlns="">'+
  '<semt_kodlari diffgr:id="semt_kodlari1" msdata:rowOrder="0">'+
   '<semt_adi>ALTIKAT</semt_adi>'+
  '</semt_kodlari>'+
 '</DocumentElement>'+
'</diffgr:diffgram>';
            console.log(xml, x2js);
            
            return {
                get: function() { 
                    return x2js.xml_str2json(xml);
               }
            };         
        });
        todoApp.controller('todosCtrl', function ($scope, todoFactory, getXMLDataFactory) {

            $scope.todos = [];
            //loadTodos();
            loadData();
            
            function loadTodos() {
                todoFactory.getTodos().success(function (data) {
                    console.log(data);
                    courses = x2js.xml_str2json(data);
                    console.log(courses.books.course);
                    $scope.todos = courses.books.course;
                });
            }
            
            function loadData() {
                console.log('test');
                $scope.todos = getXMLDataFactory.get()
                    .diffgram.DocumentElement.semt_kodlari;
                console.log($scope.todos);
            }
        });

<script src="http://demos.amitavroy.com/learningci/assets/js/xml2json.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="todosApp" ng-controller="todosCtrl">
     <h2>Parsing XML data with AngularJS</h2>
    {{todos|json}}
</div>

Error: Angular does not recognize x2js XML format

Answer №1

Similar questions

Using Typescript to test with Karma, we can inject a service for our

Having trouble removing just one element from an array in Redux. Any suggestions on how to make it work properly?

Develop an array in JavaScript using PHP on the server side

Installing material-ui using npm does not always result in getting the most up-to-date version

Tips for transitioning from GWT to AngularJS

What is the best way to display HTML content inside a pop-over window?

Combining the powers of $.get and $.ready

What is the best way to retrieve the second to last element in a list

Puppeteer causes Express to stop listening to incoming requests

Intellisense with JavaScript methods is not supported in Vue files

I am encountering difficulties with a nodejs query where I am unable to successfully include the "+" symbol as part of the query

What is the method to retrieve the class name of an element when the div is created as '<div id 'one' class="element one"></div>'?

Error message: Invalid credentials for Twitter API authentication

Cannot display GIF file from the SRC directory in a React application

Ensure that the user's credentials are accessible to all views in Node.js

Accessing a property's value from a different property within a Class' initialization function

Implementing event listeners with Angular UI-Router

Swap out the HTML button element for text once the form is submitted

"Implementing a comment system using Node.js and MySQL: A comprehensive guide

Trouble with image click event in jQuery/JavaScript