Jquery遍历json的两种数据结构

合集下载

JS遍历json和JQuery遍历json操作完整示例

JS遍历json和JQuery遍历json操作完整示例

JS遍历json和JQuery遍历json操作完整⽰例本⽂实例讲述了JS 遍历 json 和 JQuery 遍历json操作。

分享给⼤家供⼤家参考,具体如下:json 遍历<!DOCTYPE html><html><head><meta charset="utf-8" /><title>demo data</title><script src="/jquery/2.0.0/jquery.min.js"></script></head><body><script>var json = {"test1" : "data1",test2 : "data2"};//jquery 其中i 是键名 v 是键值$.each(json,function(i,v){console.log(i + " =============== " + v);})//javascript 遍历 i 是键名 json[i] 是键值var json = {"test1" : "data1",test2 : "data2"};for(i in json){console.log(i + " ======================== " + json[i]);}</script></body></html>运⾏结果:根据json键值获得 json键名<!DOCTYPE html><html><head><meta charset="utf-8" /><title>demo data</title></head><body><script>var data = {"test1" : "data1",test2 : "data2"};/*** @param json 需要检索的json对象* @void value 检索的值* @return 检索的值对应的键名*/function getKeyName(json,value){for(i in json){if(json[i] == value){return i;}}}console.log(getKeyName(data,"data2"));</script></body></html>运⾏结果:PS:关于json操作,这⾥再为⼤家推荐⼏款⽐较实⽤的json在线⼯具供⼤家参考使⽤:更多关于jQuery相关内容还可查看本站专题:《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。

jq解析json的高级用法

jq解析json的高级用法

jq解析json的高级用法jq是一个轻量级的命令行工具,用于解析和操作JSON数据。

它提供了丰富的功能和高级用法,可以帮助用户更精确地提取和处理JSON数据。

本文将介绍jq解析JSON的高级用法,包括过滤、映射和条件操作等。

第一步:基本用法回顾在开始讨论jq的高级用法之前,我们先回顾一下jq的基本用法。

jq能够将JSON数据转换为人类可读的格式,并且能够输出特定的字段或组合字段的值。

以下是一些常用的命令:1. `.`这个点操作符表示当前对象。

例如:bashecho '{"name": "Alice", "age": 30}' jq '.name'# 输出:"Alice"2. .点操作符还可以与其他命令连用,以获取嵌套字段的值。

例如:bashecho '{"user": {"name": "Alice", "age": 30}}' jq ''# 输出:"Alice"3. `[]`这个方括号操作符可以用来遍历数组,并逐个输出数组中的元素。

例如:bashecho '[1, 2, 3, 4, 5]' jq '.[]'# 输出:# 1# 2# 3# 4# 5以上是jq的基本用法,用于提取和处理JSON数据中的字段。

接下来,我们将学习一些更高级的用法。

第二步:高级过滤器jq支持一些高级过滤器,用于在JSON数据中进行更复杂的查询和操作。

下面是几个常见的高级过滤器:1. `select()``select()`函数用于根据指定的条件过滤JSON对象。

例如:bashecho '[{"name": "Alice", "age": 30}, {"name": "Bob", "age": 25}]' jq 'select(.age > 28)'# 输出:# {"name": "Alice", "age": 30}2. `map()``map()`函数用于对数组中的每个元素应用指定的操作,并返回一个新的数组。

jQuery递归遍历JSON树,生成对应的ul-li组合,形成树形菜单

jQuery递归遍历JSON树,生成对应的ul-li组合,形成树形菜单

jQuery递归遍历JSON树,⽣成对应的ul-li组合,形成树形菜单有如下JSON树形菜单数据,需要将其转换为对应的<ul><li>组合View Code1var menulist = {2 "menulist": [3 { "MID": "M001", "MName": "⾸页", "Url": "#", "menulist": "" },4 { "MID": "M002", "MName": "车辆买卖", "Url": "#", "menulist":5 [6 { "MID": "M003", "MName": "新车", "Url": "#", "menulist":7 [8 { "MID": "M006", "MName": "奥迪", "Url": "#", "menulist": "" },9 { "MID": "M007", "MName": "别克", "Url": "#", "menulist": "" }10 ]11 },12 { "MID": "M004", "MName": "⼆⼿车", "Url": "#", "menulist": "" },13 { "MID": "M005", "MName": "改装车", "Url": "#", "menulist": "" }14 ]15 },16 { "MID": "M006", "MName": "宠物", "Url": "#", "menulist": "" }17 ]18 };可使⽤如下⽅法递归得到View Code1 $(function () {2 $("#btn_bianli").click(function () {3var showlist = $("<ul></ul>");4 showall(menulist.menulist, showlist);5 $("#div_menu").append(showlist);6 });7 });89//menu_list为json数据10//parent为要组合成html的容器11function showall(menu_list, parent) {12for (var menu in menu_list) {13//如果有⼦节点,则遍历该⼦节点14if (menu_list[menu].menulist.length > 0) {15//创建⼀个⼦节点li16var li = $("<li></li>");17//将li的⽂本设置好,并马上添加⼀个空⽩的ul⼦节点,并且将这个li添加到⽗亲节点中18 $(li).append(menu_list[menu].MName).append("<ul></ul>").appendTo(parent);19//将空⽩的ul作为下⼀个递归遍历的⽗亲节点传⼊20 showall(menu_list[menu].menulist, $(li).children().eq(0));21 }22//如果该节点没有⼦节点,则直接将该节点li以及⽂本创建好直接添加到⽗亲节点中23else {24 $("<li></li>").append(menu_list[menu].MName).appendTo(parent);25 }26 }27 }稍微加上⼀点CSS就能形成⽆极菜单了,样式的东西下次再贴。

jQuery中使用$.each()遍历后台响应的json字符串问题

jQuery中使用$.each()遍历后台响应的json字符串问题

jQuery中使⽤$.each()遍历后台响应的json字符串问题今天在做练习项⽬的时候,使⽤$.each()⽅法遍历后台传过来的json字符串时,chrome浏览器中发现如下问题 Cannot use 'in' operator to search for 'length'...... 琢磨了好久,百思不得其解。

前后台代码分别如下:后台返回json字符串:$sql = "select pid, pname, price, pic, did, count from jd_product, jd_cart_detail where pid=productId and cartId=$cid";$result = mysqli_query($conn, $sql);$list = mysqli_fetch_all($result, MYSQLI_ASSOC);echo json_encode($list);前台接收并处理:$.ajax({type: "GET",url: "data/cart_detail_select.php",data: {uid: loginUid},success: function(list){var h = "";$.each(list, function(i, p){h += `some code....`;});$("#cart>tbody").html(h);},error: function(obj){alert("响应完成但有错误");console.log(obj);}});好了,问题来了,$.each()⽅法中,list参数就是后台传来的json字符串(echo json_encode($list);),然⽽在各种调试后,浏览器依然顽固的报着⽂章开头的错误。

jq遍历数组的方法

jq遍历数组的方法

jq遍历数组的方法在处理JSON数据时,经常需要遍历数组。

jq是一个非常强大的命令行工具,可以帮助我们轻松地处理JSON数据。

在本文中,我们将介绍如何使用jq遍历数组。

我们需要了解jq的基本语法。

jq使用一种类似于CSS选择器的语法来选择JSON数据。

例如,要选择JSON对象中的属性,可以使用点号(.)来表示。

例如,要选择JSON对象中的name属性,可以使用以下语法:```. name```要选择JSON数组中的元素,可以使用方括号([])来表示。

例如,要选择JSON数组中的第一个元素,可以使用以下语法:```[0]```现在,让我们看看如何使用jq遍历数组。

假设我们有以下JSON数据:```{"fruits": [{"name": "apple","color": "red"},{"name": "banana","color": "yellow"},{"name": "orange","color": "orange"}]}```要遍历fruits数组中的所有元素,可以使用以下语法:```. fruits[]```这将返回一个包含所有元素的数组。

例如,以下命令将返回所有水果的名称:```jq '.fruits[].name' data.json```输出:```"apple""banana""orange"```要选择特定的元素,可以使用方括号([])来表示。

例如,要选择第二个元素,可以使用以下语法:```. fruits[1]```这将返回一个包含第二个元素的数组。

jQuery使用$.each遍历json数组的简单实现方法

jQuery使用$.each遍历json数组的简单实现方法

这篇文章主要介绍了jQuery使用$.each遍历json数组的简单实现方法,结合实例形式分析了each方法遍历json数组的实现技巧与相关注意事项,需要的朋友可以参考下本文实例讲述了jQuery使用$.each遍历json数组的简单实现方法。

分享给大家供大家参考,具体如下:&lt;!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en""/tr/xhtml1/dtd/xhtml1-transitional.dtd"&gt;&lt;html xmlns="/1999/xhtml"&gt;&nbsp;&lt;head&gt;&nbsp;&lt;meta http-equiv="content-type" content="text/html; charset=gb2312" /&gt;&nbsp;&lt;title&gt;jquery $.each遍历json数组方法&lt;/title&gt;&nbsp;&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&nbsp;&lt;script&gt;&nbsp;var arr = [{ name: "john", lang: "js" },{ name: "nailwl", lang: "jquery" },{ name: "吴磊", lang: "ext" }];&nbsp;&nbsp;$.each( arr, function(index, content)&nbsp;{&nbsp;&nbsp; alert( "the man's no. is: " + index + ",and " + + " is learning " + ng );&nbsp;&nbsp;});&nbsp;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;&nbsp;&lt;/body&gt;&lt;/html&gt;jquery 对象的$().each() 方法,此方法可用于例遍任何对象回调函数拥有两个参数:第一个为对象的成员或数组的索引例遍数组,同时使用元素索引和内容$.each( [0,1,2], function(index, content){&nbsp;alert( "item #" + index + " its value is: " + content );});第二个为对应变量或内容如果需要退出each 循环可使回调函数返回false,其它返回值将被忽略。

Json学习文档Jquery调用JSON

Json学习文档Jquery调用JSON

Json学习文档Jquery调用JSON前言:本文的目的是弄明白什么是JSON,JSON的数据格式是什么样的。

同时弄明白使用Jquery 调用JSON的简单方法。

了解什么是jsonJSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

易于人阅读和编写。

同时也易于机器解析和生成。

它基于JavaScript Programming Languag e,Standard ECMA-262 3rd Edition - December 1999的一个子集。

JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。

这些特性使JSON成为理想的数据交换语言。

JSON建构于两种结构:名称/值”对的集合(A collection of name/value pairs)。

不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组(associative array)。

值的有序列表(An ord ered list of values)。

在大部分语言中,它被理解为数组(array)。

这些都是常见的数据结构。

事实上大部分现代计算机语言都以某种形式支持它们。

这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON具有以下这些形式:对象是一个无序的“…名称/值‟对”集合。

一个对象以“{”(左括号)开始,“}”(右括号)结束。

每个“名称”后跟一个“:”(冒号);“…名称/值‟ 对”之间使用“,”(逗号)分隔。

例如:{“name”:”jhon”,”sex”:”man”}数组是值(value)的有序集合。

一个数组以“[”(左中括号)开始,“]”(右中括号)结束。

JQuery遍历json数组的3种方法

JQuery遍历json数组的3种方法

JQuery遍历json数组的3种⽅法⼀、使⽤each遍历复制代码代码如下:$(function () {var tbody = "";//------------遍历对象 .each的使⽤-------------//对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使⽤eval函数进⾏转化(否则将得不到Object)。

本⽂不作详细介绍服务器端回调的数据问题,我们将直接⾃定义对象)var obj = [{ "name": "项海军", "password": "123456"}];$("#result").html("------------遍历对象 .each的使⽤-------------");alert(obj); //是个object元素//下⾯使⽤each进⾏遍历$.each(obj, function (n, value) {alert(n + ' ' + value);var trs = "";trs += "<tr><td>" + + "</td> <td>" + value.password + "</td></tr>";tbody += trs;});$("#project").append(tbody);});⼆、jquery遍历解析json对象1:复制代码代码如下:var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];for(var i=0,l=json.length;i<l;i++){for(var key in json[i]){alert(key+':'+json[i][key]);}}三、jquery遍历解析json对象2有如下 json对象:复制代码代码如下:var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:” ⼥”,”old”:30};遍历⽅法:复制代码代码如下:for(var p in obj){str = str+obj[p]+',';return str;}PS:这⾥再为⼤家推荐⼏款⽐较实⽤的json在线⼯具供⼤家参考使⽤:在线json压缩/转义⼯具:。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

没有落叶的秋-博客:/s/blog_8fbeeb59010153d3.html Jquery遍历json的两种数据结构简介什么是JSON?JSON 即JavaScript Object Natation(Java对象表示法),它是一种轻量级的数据交换格式,非常适合于服务器与JavaScript 的交互。

简而言之,JSON就是JavaScript交换数据的一种格式。

例子如下:{"username":"coolcooldool","password":"1230","usertype":"superadmin" }{"list":[{"password":"1230","username":"coolcooldool"},{"password":" thisis2","username":"okokok"}]}第二种是有数组的情况,我也不用文字表述JSON到底是怎么构成的了,相信长眼睛的人都看懂了。

为什么使用JSON而不是XML?尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透了脑筋,无论是服务器端生成或处理 XML,还是客户端用 JavaScript 解析 XML,都常常导致复杂的代码,极低的开发效率。

实际上,对于大多数 Web 应用来说,他们根本不需要复杂的 XML 来传输数据,XML 的扩展性很少具有优势,许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。

和返回 XML 并解析它相比,返回 HTML 片段大大降低了系统的复杂性,但同时缺少了一定的灵活性。

如何使用?当然最直接的方法就是,你自己写一个类,把你在数据库中查到的list 转换成Sting,格式就是JSON样子的就行,但前提是你比较牛叉,能很快写出来,并且是对的,第二种方式就是用第三方jar包(如:json-lib.jar,下载地址:/f/21122133.html?from=like或者jackson.jar,下载地址:/Code/Jar/j/Downloadjacksonjar.htm;),对于我这么不牛叉的人来说,我选第二种方法,人家写得好而且支持双向转换。

下面主要介绍手写转换类。

有了json格式的数据接下来写入流进行回调:String json=”jsonStr”;response.getWriter.write(json);以防出现乱码:在这之前加上:response.setContentType(“utf-8”);主要内容一、jquery遍历jsonlist二、js取得json值三、Jquery ajax请求格式如下四、Java:对象、list、javabean转换为json对象【一】五、Java:对象、list、javabean转换为json对象【二】六、Java:对象、list、javabean转换为json对象【三】1.jquery遍历jsonlistvararr=[{name:"john",lang:"js"},{name:"nailwl",lang:"jquery"},{name:"吴磊",lang:"ext"}]; $.each(arr,function(index,content){alert("theman'sno.is:"+index+",and"++"islearning"+ng); });2.js取得json值js中著名的eval函数varstrJSON="{name:'admin'}";//得到的JSONvarobj=eval("("+strJSON+")");//转换后的JSON对象alert();//admin3.Jquery ajax请求格式如下<script type="text/javascript">function BtnClick() {var uid = $("#Text1").attr("value");var pwd = $("#Text2").attr("value");$.ajax({url: "server.php",type: "post",data: { UserName: uid, Password: pwd },/*<!--第一种方法遍历json数据success: function(data) {eval("datas = "+data);var user = erName;var pass = datas.password;$("#dd").html("<h1>用户名:" + user + " 密码:" + pass + "</h1>"); }-->*//*第二种方法遍历json数据*/success: function(data) {var json =eval("["+data+"]");//这里中间的括号为中括号使数据类似[{"username":"张三","content":"沙发"}];的格式$.each(json, function(idx, item) {var user = erName;var pass = item.password;$("#dd").html("<h1>用户名:" + user + " 密码:" + pass + "</h1>"); });}});}</script>Java:对象、list、javabean转换为json对象【一】packagedsh.bikegis.tool;importjava.beans.IntrospectionException;importjava.beans.Introspector;importjava.beans.PropertyDescriptor;importjava.util.List;/***json的操作类*@authorNanGuoCan**/publicclassJsonUtil{/***@paramobject*任意对象*@ng.String*/publicstaticStringobjectToJson(Objectobject){ StringBuilderjson=newStringBuilder();if(object==null){json.append("\"\"");}elseif(objectinstanceofString||objectinstanceofInteger){ json.append("\"").append(object.toString()).append("\""); }else{json.append(beanToJson(object));}returnjson.toString();}/***功能描述:传入任意一个javabean对象生成一个指定规格的字符串**@parambean*bean对象*@returnString*/publicstaticStringbeanToJson(Objectbean){StringBuilderjson=newStringBuilder();json.append("{");PropertyDescriptor[]props=null;try{props=Introspector.getBeanInfo(bean.getClass(),Object.class).getPropertyDescriptors();}catch(IntrospectionExceptione){}if(props!=null){for(inti=0;i<props.length;i++){try{Stringname=objectToJson(props[i].getName());Stringvalue=objectToJson(props[i].getReadMethod().invoke(bean)); json.append(name);json.append(":");json.append(value);json.append(",");}catch(Exceptione){}}json.setCharAt(json.length()-1,'}');}else{json.append("}");}returnjson.toString();}/***功能描述:通过传入一个列表对象,调用指定方法将列表中的数据生成一个JSON规格指定字符串**@paramlist*列表对象*@ng.String*/publicstaticStringlistToJson(List<?>list){StringBuilderjson=newStringBuilder();json.append("[");if(list!=null&&list.size()>0){for(Objectobj:list){json.append(objectToJson(obj));json.append(",");}json.setCharAt(json.length()-1,']');}else{json.append("]");}returnjson.toString();}}Java:对象、list、javabean转换为json对象【二】package young.ajax.json;import java.beans.IntrospectionException;import java.beans.Introspector;import java.beans.PropertyDescriptor;import java.math.BigDecimal;import java.math.BigInteger;import java.util.List;import java.util.Map;import java.util.Set;import mons.logging.Log;import mons.logging.LogFactory;public class JsonUtil {private static Log log = LogFactory.getLog(JsonUtil.class); public static String object2json(Object obj) {StringBuilder json = new StringBuilder();if (obj == null) {json.append("\"\"");} else if (obj instanceof String || obj instanceof Integer || obj instanceof Float|| obj instanceof Boolean || obj instanceof Short || obj instanceof Double|| obj instanceof Long || obj instanceof BigDecimal || obj instanceof BigInteger|| obj instanceof Byte) {json.append("\"").append(string2json(obj.toString())).append("\""); } else if (obj instanceof Object[]) {json.append(array2json((Object[]) obj));} else if (obj instanceof List) {json.append(list2json((List<?>) obj));} else if (obj instanceof Map) {json.append(map2json((Map<?, ?>) obj));} else if (obj instanceof Set) {json.append(set2json((Set<?>) obj));} else {json.append(bean2json(obj));}return json.toString();}public static String bean2json(Object bean) {StringBuilder json = new StringBuilder();json.append("{");PropertyDescriptor[] props = null;try {props = Introspector.getBeanInfo(bean.getClass(), Object.class).getPropertyDescriptors();} catch (IntrospectionException e) {}if (props != null) {for (int i = 0; i < props.length; i++) {try {String name = object2json(props[i].getName());String value =object2json(props[i].getReadMethod().invoke(bean));json.append(name);json.append(":");json.append(value);json.append(",");} catch (Exception e) {}}json.setCharAt(json.length() - 1, '}'); } else {json.append("}");}return json.toString();}public static String list2json(List<?> list) {StringBuilder json = new StringBuilder(); json.append("[");if (list != null && list.size() > 0) {for (Object obj : list) {json.append(object2json(obj));json.append(",");}json.setCharAt(json.length() - 1, ']'); } else {json.append("]");}return json.toString();}public static String array2json(Object[] array) {StringBuilder json = new StringBuilder(); json.append("[");if (array != null && array.length > 0) { for (Object obj : array) {json.append(object2json(obj));json.append(",");}json.setCharAt(json.length() - 1, ']'); } else {json.append("]");}return json.toString();}public static String map2json(Map<?, ?> map) {StringBuilder json = new StringBuilder(); json.append("{");if (map != null && map.size() > 0) {for (Object key : map.keySet()) {json.append(object2json(key));json.append(":");json.append(object2json(map.get(key))); json.append(",");}json.setCharAt(json.length() - 1, '}'); } else {json.append("}");}return json.toString();}public static String set2json(Set<?> set) {StringBuilder json = new StringBuilder(); json.append("[");if (set != null && set.size() > 0) {for (Object obj : set) {json.append(object2json(obj));json.append(",");}json.setCharAt(json.length() - 1, ']'); } else {json.append("]");}return json.toString();}public static String string2json(String s) {if (s == null)return "";StringBuilder sb = new StringBuilder();for (int i = 0; i < s.length(); i++) {char ch = s.charAt(i);switch (ch) {case '"':sb.append("\\\"");break;case '\\':sb.append("\\\\");break;case '\b':sb.append("\\b");break;case '\f':sb.append("\\f");break;case '\n':sb.append("\\n");break;case '\r':sb.append("\\r");break;case '\t':sb.append("\\t");break;case '/':sb.append("\\/");break;default:if (ch >= '\u0000' && ch <= '\u001F') {String ss = Integer.toHexString(ch);sb.append("\\u");for (int k = 0; k < 4 - ss.length(); k++) {sb.append('0');}sb.append(ss.toUpperCase());} else {sb.append(ch);}}}return sb.toString();}}Java:对象、list、javabean转换为json对象【三】package young.ajax.json;importjava.util.HashMap;import java.util.List;import java.util.Map;import net.sf.json.JSONArray;import net.sf.json.JSONException;import net.sf.json.JSONObject;public class JsonConvert{ public static JSONObject message(String message, boolean success){ Map map = new HashMap();map.put("success", success);map.put("message", message);return JSONObject.fromObject(map);}public static JSONObject generate(List list){ Map map = new HashMap();map.put("totalProperty", list.size());map.put("root", list);return JSONObject.fromObject(map);}public static JSONObject javabean2json(Object object, String message, boolean success){ Map map = new HashMap();map.put("success", success);map.put("message", message);map.put("data", object);return JSONObject.fromObject(map);}public static JSONObject objectcollect2json(List list, Stringtotal) {Map map = new HashMap();map.put("totalProperty", total);map.put("root", list);return JSONObject.fromObject(map);}public static JSONArray getJSONArrayFormString(String str) { if (str == null || str.trim().length() == 0) {return null;}JSONArray jsonArray = null;try {jsonArray = JSONArray.fromObject(str);} catch (JSONException e){ e.printStackTrace(); }return jsonArray; }public static JSONObject StringToJSONOBject(String str) {if (str == null || str.trim().length() == 0){ return null; }JSONObject jsonObject = null;try { jsonObject = JSONObject.fromObject(str);} catch (JSONException e){ e.printStackTrace(); }return jsonObject; }}将以上的代码任意的一种转换方式添加到JsonConvert.java,以方便以后的使用本文档也结合了网上的一些原话,请原创见谅。

相关文档
最新文档