angular.fromJson与toJson方法用法示例

 更新时间:2017年05月17日 11:35:56   作者:itsonglin  
这篇文章主要介绍了angular.fromJson与toJson方法用法,结合实例形式分析了AngularJS使用fromJson与toJson方法进行json格式数据的解析与转换相关操作技巧,需要的朋友可以参考下

本文实例讲述了angular.fromJson与toJson方法用法。分享给大家供大家参考,具体如下:

AngularJS的angular.fromJson()方法可以把一个Json字符串中解析成一个对象,或对象数组:

<!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()">点击我!</button>
</div>
</body>
</html>

控制台打印的结果如下:

liSi
zhangSan
321

相应地,能够从Json到对象,就能够从对象到Json:

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

打印结果如下:

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

PS:关于json操作,这里再为大家推荐几款比较实用的json在线工具供大家参考使用:

在线JSON代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json

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

在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具:
http://tools.jb51.net/code/json_yasuo_trans

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

希望本文所述对大家AngularJS程序设计有所帮助。

相关文章

  • 浅谈对Angular中的生命周期钩子的理解

    浅谈对Angular中的生命周期钩子的理解

    本篇文章主要介绍了Angular中的生命周期钩子的理解,详细的介绍了生命周期钩子和主要的生命周期钩子,有兴趣的可以了解一下
    2017-07-07
  • 详解angular如何调用HTML字符串的方法

    详解angular如何调用HTML字符串的方法

    这篇文章主要介绍了详解angular如何调用HTML字符串的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • AngularJs用户输入动态模板XSS攻击示例详解

    AngularJs用户输入动态模板XSS攻击示例详解

    这篇文章主要给大家介绍了关于AngularJs用户输入动态模板XSS攻击的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angularjs具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04
  • AngularJS全局scope与Isolate scope通信用法示例

    AngularJS全局scope与Isolate scope通信用法示例

    这篇文章主要介绍了AngularJS全局scope与Isolate scope通信用法,结合格式分析了全局scope和directive本地scope相关功能、通信用法与相关注意事项,需要的朋友可以参考下
    2016-11-11
  • angularJS中$apply()方法详解

    angularJS中$apply()方法详解

    这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下
    2015-01-01
  • 简单讲解AngularJS的Routing路由的定义与使用

    简单讲解AngularJS的Routing路由的定义与使用

    这篇文章主要介绍了AngularJS的Routing路由的定义与使用,讲解了when()和otherwise()两个相关的常用方法,需要的朋友可以参考下
    2016-03-03
  • 分享Angular http interceptors 拦截器使用(推荐)

    分享Angular http interceptors 拦截器使用(推荐)

    AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。这篇文章主要介绍了分享Angular http interceptors 拦截器使用(推荐),需要的朋友可以参考下
    2019-11-11
  • 解决Angular4项目部署到服务器上刷新404的问题

    解决Angular4项目部署到服务器上刷新404的问题

    今天小编就为大家分享一篇解决Angular4项目部署到服务器上刷新404的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • AugularJS从入门到实践(必看篇)

    AugularJS从入门到实践(必看篇)

    下面小编就为大家带来一篇AugularJS从入门到实践(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Angular重构数组字段的解决方法示例

    Angular重构数组字段的解决方法示例

    这篇文章主要为大家介绍了Angular重构数组字段的解决方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论