在 AngularJS 中將 XML 轉換為 JSON

2015-11-24    分類:WEB開發、程式設計開發、首頁精華2人評論發表於2015-11-24

本文由碼農網 – 小峰原創翻譯,轉載請看清文末的轉載要求,歡迎參與我們的付費投稿計劃

在這篇文章中,我們將談談如何在Angular JS中將XML檔案轉換為JSON。大家都知道Angular JS是開發應用程式的JavaScript框架。所以基本上Angular  JS期望得到的響應式JSON格式的。因此,在你開始對資料進行操作之前,建議返回JSON格式的資料。在這篇文章中,我們會使用Angular JS $http服務載入一個本地的XML檔案,並將這個XML檔案轉換成JSON。如果你是Angular  JS新手,請閱讀《Angular  JS》。希望你會喜歡這篇文章。

背景

我曾發表過一篇有關於Angular JS $http服務的文章:《$http Service In Angular JS

原始碼

下載原始碼: XML to JSON Source Code

使用程式碼

首先建立一個HTML頁面。

<!DOCTYPE html>
<html>
<head>
    <title>Convert XML to JSON In Angular JS - SibeeshPassion </title>
</head>
<body>
</body>
</html>

現在,如下新增所需的引用。

<script src="jquery-2.1.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="xml2json.js"></script>

你注意到了嗎,我已經新增了xml2json.js檔案?這就是將要轉換的檔案。你可以從https://code.google.com/p/x2js/下載檔案。<wbr><wbr>

現在建立一個控制器和應用程式指令,如下所示。

<div ng-app="httpApp" ng-controller="httpController">
</div>

接下來我們需要做的是新增服務。你可以按如下方式新增$http服務。

var app = angular.module('httpApp', []);
app.controller('httpController', function ($scope, $http) {
  $http.get("Sitemap.xml",
            {
    transformResponse: function (cnv) {
      var x2js = new X2JS();
      var aftCnv = x2js.xml_str2json(cnv);
      return aftCnv;
    }
  })
    .success(function (response) {
    console.log(response);
  });
});

這裡的httpApp是我們的應用程式,httpController是我們的控制器。我們使用函式transformResponse轉換響應。

轉換請求和響應

在Angular  JS中,請求可以使用transformRequest函式轉換,如果是響應的話,可以通過函式transformResponse轉換。這些函式返回轉換後的值。

下面是我們使用transformResponse函式的一個例子。

transformResponse: function (cnv) {
  var x2js = new X2JS();
  var aftCnv = x2js.xml_str2json(cnv);
  return aftCnv;
}

這個x2js.xml_str2json(CNV)將返回JSON物件,並從transformResponse函式返回aftCnv。聽起來不錯吧?一旦準備就緒,我們只要在瀏覽器控制檯寫JSON物件,就可以看到該物件了。

輸出

在Angular JS中轉換XML為JSON,就是這麼簡單。祝大家Happy coding!

結論

歡迎大家的火眼金睛。如果我有什麼遺漏或寫錯的地方,請不吝指正。希望大家能夠喜歡這篇文章。

譯文連結:http://www.codeceo.com/article/angularjs-xml-to-json.html
英文原文:Convert XML to JSON In Angular JS
翻譯作者:碼農網 – 小峰
轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊。]

相關文章