1、设计源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用JavaScript遍历JSON数组</title>
<script type="text/javascript">
     function traJsonArray()
	 {
		 var jsonArray = [{"id":"100","name":"zhangsan","age":"23","sex":"man"},{"id":"101","name":"lisi","age":"21","sex":"woman"},{"id":"102","name":"wangwu","age":"22","sex":"man"}];
		 var inputText = "";
		 for(var json in jsonArray)
		 {
			 for(var key in jsonArray[json])
			 {
				inputText += jsonArray[json][key]+",";
			 }
		 }

		 document.getElementById("areaText").innerText = inputText;
	 }
</script>
</head>

<body>
   <div>
      <input type="button" id="btn" onclick="traJsonArray()" value="利用JavaScript遍历JSON数组"/>
      <textarea id="areaText" cols="80" rows="30"></textarea>
   </div>
</body>
</html>

2、设计结果

如何利用JavaScript遍历JSON数组的更多相关文章

  1. jquery $.each遍历json数组方法

    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/ ...

  2. JQuery遍历json数组的3种方法

    这篇文章主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each.for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下 一.使用each遍历 $(functio ...

  3. javascript遍历json对象数据的方法

    JSON中,有两种结构:对象和数组,对象是没有length这个属性,而数组结构是有的,下面分别说下这两种结构之间的区别和遍历方式. 1.对象 一个对象以“{”开始,“}”结束.每个“key”后跟一“: ...

  4. $.each遍历json数组

    1.遍历单层json数组 我们把idx和obj都打印出来看看,到底是什么东西 var json1 =[{"id":"1","tagName" ...

  5. jquery $.each()遍历json数组

    使用jQuery的$.each()方法来遍历一个数组对象 var json=[ {"id":"1","tagName":"appl ...

  6. Json格式循环遍历,Json数组循环遍历

    Json格式数据如何遍历,这里我们可以用for..in实现 例如最简单的json格式 , 'handsome' : 'yes' }; for( var key in json1 ){ console. ...

  7. jquery遍历获取带checkbox表格的选中值以及遍历json数组

    今天整理了一下jquery遍历的两个用法,分享给大家. 1.$().each 主要用来遍历DOM元素,获取DOM的值或样式等. 2.$.each() 主要用来遍历后台ajax返回的json数组,循环将 ...

  8. jQuery 遍历json数组的实现代码

    <script type="text/javascript"> "}]; $(d1).each(function(){ alert(this.text+&qu ...

  9. 遍历json数组实现树

    今天小颖在工作中遇到要遍历树得问题了,实现后,怕后期遇到又忘记啦,所以记录下嘻嘻,其实这个和小颖之前写过得一篇文章    json的那些事    中第4点有关json的面试题有些类似. 数组格式: v ...

随机推荐

  1. 如何更改图片的背景色（PS、证件照之星）

    如何更改图片的背景色(PS.证件照之星) 1.1  证照之星教你如何给证件照换背景 证照之星教你如何给证件照换背景?这个问题困扰很多人,如果你不了解证照之星,一款专业的证件照片制作软件,你肯定就无法自 ...

  2. Maven pom.xml简单归结

    Maven pom.xml文件解释 请确保有相关的maven知识,包括Maven安装.Maven settings.xml解读.本文对POM的一些属性作一些摘录,详细的配置可查看此篇转载文章" ...

  3. JAVAEE——BOS物流项目05：OCUpload、POI、pinyin4J、重构分页代码、分区添加、combobox

    1 学习计划 1.实现区域导入功能 n OCUpload一键上传插件使用 n 将文件上传到Action n POI简介 n 使用POI解析Excel文件 n 完成数据库操作 n 使用pinyin4J生 ...

  4. 乞丐版servlet容器第1篇

    本系列参照pkpk1234大神的BeggarServletContainer,具体请访问:https://github.com/pkpk1234/BeggarServletContainer. 一步一 ...

  5. ASP.NET Core Razor 页面使用指南

    ASP.NET Core Razor 页面作为 ASP.NET Core 2.0的一部分发布,它是基于页面的全新的Web开发框架.如果您想学习如何使用 ASP.NET Core Razor 页面,可以 ...

  6. 一、scrapy的下载安装---Windows（安装软件太让我伤心了）

    写博客就和笔记一样真的很有用,你可以随时的翻阅.爬虫的爬虫原理与数据抓取.非结构化与结构化数据提取.动态HTML处理和简单的图像识别已经学完,就差整理博客了 开始学习scrapy了,所以重新建了个分类 ...

  7. Python高级用法总结

    Python很棒,它有很多高级用法值得细细思索,学习使用.本文将根据日常使用,总结介绍Python的一组高级特性,包括:列表推导式.迭代器和生成器.装饰器. 列表推导(list comprehensi ...

  8. httpd的三种模式比较

    查看你的httpd使用了哪种模式: /usr/local/apache2/bin/httpd -V |grep 'Server MPM' 使用哪种模式,需要在编译的时候指定 --with-mpm=pr ...

  9. 关于FFMPeg-PHP你必须要知道的

    #PHP FFmpeg [![Build Status](https://secure.travis-ci.org/PHP-FFMpeg/PHP-FFMpeg.png?branch=master)]( ...

  10. C语言_了解一下C语言中的四种存储类别

    C语言是一门通用计算机编程语言,应用广泛.C语言的设计目标是提供一种能以简易的方式编译.处理低级存储器.产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言. C语言中的四种存储类别:auto ...