在 AngularJS 中將 XML 轉換為 JSON

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

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

在這篇文章中，我們將談談如何在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
翻譯作者：碼農網 – 小峰
[ 轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊。]

相關文章