angular.fromJson與toJson方法用法示例

更新時間：2017年05月17日 11:35:56 作者：itsonglin

這篇文章主要介紹了angular.fromJson與toJson方法用法,結(jié)合實(shí)例形式分析了AngularJS使用fromJson與toJson方法進(jìn)行json格式數(shù)據(jù)的解析與轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了angular.fromJson與toJson方法用法。分享給大家供大家參考，具體如下：

AngularJS的angular.fromJson()方法可以把一個Json字符串中解析成一個對象，或?qū)ο髷?shù)組：

<!DOCTYPE html>
<html ng-app="App">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../js/angular.js"></script>
  <script type="text/javascript">
    angular.module("App", [])
        .controller("parseController", function($scope)
        {
          $scope.parse = function()
          {
            var json = '{"name":"liSi", "password":"321"}';
            var jsonArr = '[{"name":"zhangSan", "password":"123"},{"name":"liSi", "password":"321"}]';
            var obj = angular.fromJson(json);
            console.log(obj.name);
            var objArr = angular.fromJson(jsonArr);
            console.log(objArr[0].name);
            console.log(objArr[1].password);
          }
        });
  </script>
</head>
<body>
<div ng-controller="parseController">
  <button ng-click="parse()">點(diǎn)擊我！</button>
</div>
</body>
</html>

控制臺打印的結(jié)果如下：

liSi
zhangSan
321

相應(yīng)地，能夠從Json到對象，就能夠從對象到Json:

var obj =
{
  name:"liSi", password:"321"
}
var str = angular.toJson(obj, true);
console.log(str);

打印結(jié)果如下：

{
 "name": "liSi",
 "password": "321"
}

PS：關(guān)于json操作，這里再為大家推薦幾款比較實(shí)用的json在線工具供大家參考使用：

在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

在線json壓縮/轉(zhuǎn)義工具：
http://tools.jb51.net/code/json_yasuo_trans

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章:

angular
Json

相關(guān)文章

詳解Angular 4.x NgTemplateOutlet
這篇文章主要介紹了詳解Angular 4.x NgTemplateOutlet,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
Angularjs 實(shí)現(xiàn)分頁功能及示例代碼
這篇文章主要介紹了Angularjs 實(shí)現(xiàn)分頁功能及示例代碼的相關(guān)資料,需要的朋友可以參考下
2016-09-09
基于angular實(shí)現(xiàn)樹形二級表格
這篇文章主要介紹了angular手寫樹形二級表格的完整代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2021-10-10
AngularJS 使用ng-repeat報錯 [ngRepeat:dupes]
這篇文章主要介紹了AngularJS 使用ng-repeat報錯 [ngRepeat:dupes] 的相關(guān)資料,需要的朋友可以參考下
2017-01-01
Angular2實(shí)現(xiàn)的秒表及改良版示例
這篇文章主要介紹了Angular2實(shí)現(xiàn)的秒表及改良版,結(jié)合實(shí)例形式分析 Angular2實(shí)現(xiàn)秒表功能的原理、操作技巧與相關(guān)注意事項,需要的朋友可以參考下
2019-05-05
Angular學(xué)習(xí)筆記之a(chǎn)ngular的$filter服務(wù)淺析
本文是小編記錄的angular學(xué)習(xí)筆記，通過本文首先給大家介紹了$filter服務(wù)，然后介紹下內(nèi)置filter及filter的簡單使用，非常不錯具有參考借鑒價值，感興趣的朋友一起看看吧
2016-11-11
AngularJS實(shí)現(xiàn)使用路由切換視圖的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)使用路由切換視圖的方法,結(jié)合學(xué)生信息管理系統(tǒng)為例分析了使用controllers.js控制器來切換視圖的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
2017-01-01
Angular 2.x學(xué)習(xí)教程之結(jié)構(gòu)指令詳解
結(jié)構(gòu)指令通過添加和刪除 DOM 元素來更改 DOM 布局。Angular 中兩個常見的結(jié)構(gòu)指令是 *ngIf 和 *ngFor，下面這篇文章主要給大家介紹了關(guān)于Angular 2.x結(jié)構(gòu)指令的相關(guān)資料，需要的朋友可以參考下。
2017-05-05
Angular工具方法學(xué)習(xí)
這篇文章主要為大家詳細(xì)介紹了Angular工具方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
AngulerJS學(xué)習(xí)之按需動態(tài)加載文件
本篇文章主要介紹了AngulerJS學(xué)習(xí)之按需動態(tài)加載文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02