How to read XML data return from WCF datatable in javascript?

See more:

XML

Java

JSON

AngularJs

Hi,

Our current service was developed in WCF and most of the method return as DataTable and string combination.

Now they need to develop a web base on this service but don't need to restructure or modify the code, just return it as json to support http request.

Below is my example data:

<DataTable xmlns="http://schemas.datacontract.org/2004/07/System.Data">
	<xs:schema id="NewDataSet" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns="" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
	<xs:element name="NewDataSet" msdata:IsDataSet="true" msdata:MainDataTable="TableName" msdata:UseCurrentLocale="true"><xs:complexType>
	<xs:choice minOccurs="0" maxOccurs="unbounded"><xs:element name="TableName"><xs:complexType><xs:sequence><xs:element name="TraID" type="xs:int" minOccurs="0"/><xs:element name="TraDate" type="xs:dateTime" minOccurs="0"/></xs:sequence></xs:complexType></xs:element></xs:choice></xs:complexType></xs:element></xs:schema>
	
	<diffgr:diffgram xmlns:diffgr="urn:schemas-microsoft-com:xml-diffgram-v1" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
		<DocumentElement xmlns="">
			<TableName diffgr:id="TableName1" msdata:rowOrder="0">
				<TraID>16001</TraID>
				<TraDate>2016-07-30T00:00:00+07:00</TraDate>
			</TableName>

			<TableName diffgr:id="TableName2" msdata:rowOrder="1">
				<TraID>16002</TraID>
				<TraDate>2016-07-29T00:00:00+07:00</TraDate>
			</TableName>
		</DocumentElement>
	</diffgr:diffgram>
</DataTable>

AngularJS $http method:

$http({
        url: api_url + "/GetTra?PassKey=" + passkey,
        method: "GET",
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        },
        dataType: 'json'
    }).then(function (r) {
        console.log(r.data.GetTraResult);
    }, function (e) {

    });

so my problem is how can I get above xml data as an array or object to display in a view?

I have tried something like this but it says got undefined of tag name

var transaction = [];
    var tra = {

    };

    function myFunction(xml) {
        var i;
        var xmlDoc = xml.responseXML;
        var data = xmlDoc.getElementsByTagName("TableName");
        for (i = 0; i < data.length; i++) {
            var d = data[i];
            tra.TraID = d[i].getElementsByTagName("TraID")[0].childNodes[0].nodeValue;
            tra.TraDate = d[i].getElementsByTagName("TraDate")[0].childNodes[0].nodeValue;
            transaction.push(tra);
        }
    }

Thank you for your help in advance.

What I have tried:

I try to use some standard xml function from google but it not working in this xml data format, so please help me out.