`
2008winstar
  • 浏览: 60769 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • chenke: 写的很好,也可以看看那这个文章,我感觉学的还可以。http:/ ...
    HTML

使用JSON

 
阅读更多

本文内容来自《Pro AngularJS》,原文作者为Adam Freeman。

翻译过程中加入了译者的理解,并作了适当的筛减。

 

JavaScript对象表示法(JSON)已成了Web应用中实际使用的数据格式。JSON非常简单且容易在JavaScript代码中使用,这使它非常流行。JSON支持一些简单的数据类型,这些数据类型能在JavaScript找到与之对应:Number,String,Boolean,Array,Object以及特殊的类型null。

 

在此提醒一下,下面是todo.json文件的内容,它包含的就是简单的JSON串:

[
	{
		"action": "Buy Flowers", 
		"done": false
	},
	{
		"action": "Get Shoes", 
		"done": false
	},
	{
		"action": "Collect Tickets", 
		"done": true
	},
	{
		"action": "Call Joe", 
		"done": false
	}
]

 

JSON数据看起来与JavaScript中数组和对象的字面量声明有几分类似。唯一的不同就是对象的属性名必须使用双引号(译者注:应该还是有其它差别的)。

 

AngularJS中可以很方便的使用JSON。当你通过Ajax请求JSON数据时,返回的数据会自动被解析为JavaScript对象并且传到成功的回调函数中,如前面使用$http.get方法获取服务端的一个JSON文件所演示的那样。

 

AngularJS提供了两个限行地对JSON进行编码和解码的方法:angular.fromJson和angular.toJson。具体演示如下:

<!DOCTYPE html>
<html ng-app="demo">
	<head>
		<meta charset="utf-8">
		<title>Example</title>
		<link rel="stylesheet" href="boostrap3/css/bootstrap.min.css" />
	</head>
	<body ng-controller="demoCtrl">
		<div class="panel">
			<h1>To Do</h1>
			<table class="table table-striped">
				<tr>
					<td>Action</td>
					<td>Done</td>
				</tr>
				<tr ng-repeat="item in todos">
					<td>{{item.action}}</td>
					<td>{{item.done}}</td>
				</tr>
			</table>
		</div>		
		<script src="js/angular/angular.min.js"></script>
		<script>
			var myApp = angular.module('demo', []);
			
			myApp.controller('demoCtrl', ['$scope', '$http', function($scope, $http){
				$http.get('data/todo.json').success(function(data){
					var jsonString = angular.toJson(data);
					console.log(jsonString);
					$scope.todos = angular.fromJson(jsonString);
				});
			}])
		</script>
	</body>
</html>

 

在这个示例中,对传个promise成功回调函数的数据对象进行了处理。这个数据对象是以JSON的格式从后端获取的,然后AngularJS自动地将它解析成了JavaScript数组。然后,我使用angular.toJson方法又将这个数组编码成JSON格式并通过控制台输出。最后,使用前面得到的JSON数据并调用angular.fromJson方法创建了另一个JavaScript对象,并把这个对象提供给Angular控制器作为数据模型然后通过ng-repeat指令在table标签中渲染出来。

 

 

 

分享到:
评论

相关推荐

    MFC使用json11解析JSON

    在本项目中,我们关注的是如何在MFC应用中使用json11库来解析和操作JSON数据。 json11是一个小型且易于使用的C++ JSON解析器和生成器,它提供了将JSON字符串转换为C++对象以及反之的过程。下面我们将详细讨论如何在...

    Java中使用Json

    本文将深入探讨在Java中如何使用JSON,以及其在实际开发中的应用场景。 首先,Java中处理JSON的主要工具有两个:Jackson和Gson。这两个库提供了API,可以帮助我们轻松地将Java对象转换为JSON字符串,以及将JSON字符...

    Ajax中使用JSON传输数据

    本篇文章将深入探讨在Ajax中如何使用JSON来传输数据,以及涉及到的相关工具和源码。 首先,让我们理解JSON的基本概念。JSON是一种基于JavaScript语法的数据表示方式,它可以表示数组、对象、数值、字符串等基本数据...

    使用json封装数据 html源代码

    描述中的“json的简单应用”表明我们将探讨JSON的基础用法,以及如何在一个具有增加和删除功能的例子中使用JSON。这通常涉及到动态网页开发,例如使用JavaScript或者jQuery库来实现用户界面的交互,通过解析JSON数据...

    MFC/VC控制台下使用json库

    本文将深入探讨如何在MFC/VC++控制台应用程序中集成并使用JSON库,以便更好地处理JSON数据。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛应用于服务器与客户端之间的数据传输。 首先,我们...

    java使用Json所需要导入的所有jar包

    为了在Java程序中使用JSON,你需要引入一些特定的库,这些库提供了处理JSON对象的方法和功能。本资源包含的是"java使用Json所需要导入的所有jar包",确保了你在处理JSON数据时所需的全部依赖。 首先,最重要的库是`...

    JSP中如何使用JSON

    在这个“Google导航案例”中,我们将探讨如何在JSP中使用JSON来实现数据的交互。 首先,了解JSON的基本结构至关重要。JSON格式基于JavaScript语法,但它是独立于语言的。一个JSON对象以大括号{}包围,由键值对组成...

    java使用json的必备7个jar包

    在java中使用json需要引入以下六个jar包,分别为: commons-lang-2.4.jar commons-collections-3.2.1.jar commons-beanutils-1.8.3.jar json-lib-2.4-jdk15.jar ezmorph-1.0.6.jar commons-logging-1.1.3.jar ...

    java使用json需要的jar包(最新)

    标题"java使用json需要的jar包(最新)"指出,这是一个包含最新版本的Java JSON处理库的jar包。在Java世界中,常用的JSON库有Jackson、Gson、org.json和FastJSON等。这些库都提供了jar文件,供开发者导入到项目中使用...

    json文件是什么+为什么使用json文件+如何使用json文件

    为什么使用 JSON 文件?如何使用 JSON 文件? JSON 文件是什么? JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,于 21 世纪初由 Douglas Crockford 提出。该格式旨在解决数据交换问题,提供了一...

    Delphi使用JSON

    标题 "Delphi 使用 JSON" 涉及到的是在 Delphi 开发环境中处理 JSON(JavaScript Object Notation)数据格式的方法。JSON 是一种轻量级的数据交换格式,它以易于人阅读和编写,同时也易于机器解析和生成。在 Delphi ...

    使用json-lib实现json与Java对象的互转

    要使用 `json-lib` 实现 JSON 与 Java 对象的互转,首先需要在项目中引入该库。如果你使用的是 Maven,可以在 `pom.xml` 文件中添加如下依赖: ```xml &lt;groupId&gt;net.sf.json-lib&lt;/groupId&gt; &lt;artifactId&gt;json-lib...

    使用json-lib解析json所需要的jar

    使用json-lib解析json所需要的jar,包括: commons-beanutils-1.7.0.jar、commons-collections-3.2.jar、 commons-lang-2.4.jar、commons-logging-1.1.jar、 ezmorph-1.0.4.jar、json-lib-2.2.2-jdk15.jar

    Java中使用Json的net.sf.json包

    反过来,使用`JSONObject.fromObject()`或`JSONArray.fromObject()`可以将JSON字符串解析为Java对象: ```java JSONObject parsedObject = JSONObject.fromObject(jsonString); ``` 此外,`net.sf.json`库依赖于...

    使用JSON所需依赖包

    使用JSON时,所需要的依赖包:json-lib-2.4-jdk15.jar,commons-beanutils.jar,commons-httpclient.jar,commons-lang.jar,ezmorph.jar,morph-1.0.1.jar

    C#.net 使用json作为配置文件,解悉JSON示例

    这样,C#.NET项目就能方便地使用JSON文件作为配置来源,无论是简单的桌面应用还是复杂的Web应用,都可以通过JSON来管理各种配置信息,提高代码的可读性和维护性。通过这种方式,开发者能够快速地获取和修改应用程序...

    delphi 使用json 示例

    这个“delphi 使用json 示例”是一个很好的起点,帮助我们了解如何在Delphi中解析、生成和操作JSON。 首先,我们需要导入System.JSON单元,这是Delphi处理JSON的基础。在你的代码开头添加以下导入语句: ```delphi...

    使用JSON所需要的jar包

    使用JSON所需要的Jar包: commons-beanutils.jar commons-collections-3.1.jar commons-lang.jar commons-logging.jar ezmorph-1.0.6.jar json-lib-2.2.2-jdk15.jar

    android servlet使用JSON交换信息示例

    android端和servlet端使用JSON交换数据信息的简单小例子,部分代码在JSP环境下实现,搞过Java WEB开发(JSP)的程序员,应该对Servlet不陌生,Json目前也是流行技术,所以说这个例子将Android、Json、Servlet三者结合...

    使用json常用到的6个包

    使用json常用到的6个包,解决报org.apache.commons.collections.map.ListOrderedMap和org.apache.commons.lang.exception.NestableRuntimeException错误

Global site tag (gtag.js) - Google Analytics