javascript: Jquery each loop with json array or object
2023-09-11 14:19:12 时间
{ "justIn": [ { "textId": "123", "text": "Hello,geovindu", "textType": "Greeting" }, { "textId": "514", "text":"Whats up?", "textType": "Question" }, { "textId": "122", "text":"Come over here", "textType": "Order" } "recent": [ { "textId": "1255", "text": "Hello,sibodu", "textType": "Greeting" }, { "textId": "6564", "text":"Whats up?", "textType": "Question" }, { "textId": "0192", "text":"Come over here", "textType": "Order" } "old": [ { "textId": "5213", "text": "Hello,geovindu", "textType": "Greeting" }, { "textId": "9758", "text":"Whats up?", "textType": "Question" }, { "textId": "7655", "text":"Come over here", "textType": "Order" } }
script src="Scripts/jquery-1.9.1.min.js" type="text/javascript" /script script type="text/javascript" $(document).ready(function () { $("#Link").click(function () { $.ajax({ type: "GET", url: "jsonfile/5.json", dataType: "json", success: function (data) { $.each(data, function (k, v) { $("#mapinfo").append(k + , + " br/ hr/ $.each(v, function (k1, v1) { //$("#title").append(k); $("#info").append(k1 + + v1.textId + + v1.text + + v1.textType + " /div hr/ return false; /script /head body input type="button" id="Link" value="query"/ div id="title" /div div id="content" /div div id="mapinfo" /div div id="info" /div /body /html
json:
{ "district": [ "did": "1", "name": "武昌区", "communitys": { "community": [ "cid": "21", "name": "安顺家园", "url": "asjy", "address": "武昌区中北路23号", "x": "114.33830023", "y": "30.55309607", "img": "com21.png", "hot": "0", "groupbuy": "0", "estates": { "estate": [ "name": "竹居", "value": "Z" "name": "梅岭", "value": "M" "name": "兰亭", "value": "L" "name": "菊坊", "value": "J" "cid": "25", "name": "百瑞景中央生活区", "url": "brj", "address": "武昌武珞路586号", "x": "114.33729172", "y": "30.52570714", "img": "com25.png", "hot": "0", "groupbuy": "0", "estates": { "estate": [ "name": "南一区", "value": "S" "name": "北一区", "value": "N" "name": "东二区", "value": "E" "name": "西二区", "value": "W" },
title json jquery 遍历json对象 数组 geovindu /title script src="Scripts/jquery-1.9.1.min.js" type="text/javascript" /script script type="text/javascript" ///对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使用eval函数进行转化(否则将得不到Object)。本文不作详细介绍服务器端回调的数据问题,我们将直接自定义对象) $(document).ready(function () { $(#button).click(function () { $.ajax({ type: "GET", url: "jsonfile/4.json", dataType: "json", success: function (data) { //var obj = eval(data.district); $(data.district).each(function (index, value) { // var val = obj[index]; $("#title").append(index); $.each(value, function (k1, v1) { $("#content").append(k1 + + v1 + " /div hr/ if (k1 == "communitys") { $.each(v1, function (q1, qname) { $("#mapinfo").append(q1 + + qname + " /div hr/ if (q1 == "community") { $.each(qname, function (t1, tname) { $("#result").append(t1 + , + tname.cid +tname.name+tname.address+tname.x+tname.y+tname.img+ " /div hr/ return false; }); /script /head body div 点击按钮获取JSON数据 /div input type="button" id="button" value="确定" / div id="title" /div div id="content" /div div id="mapinfo" /div div id="result" /div div id="info" /div /body /html
javaScript系列 [05]-javaScript和JSON 本文输出和JSON有关的以下内容 JSON和javaScript JSON的语法介绍 JSON的数据类型 JSON和XMLHTTPRequest JSON的序列化和反序列化处理
geovindu 读者是,读之者,者之读.一沙一世界! to be is to do举世皆清我独浊,众人皆醒我独醉.俺是农民工,程序员.
Let s Work Together On The Future Of JavaScript Through TC39 立即下载
相关文章
- javascript 理解和使用回调函数
- 基于HTML,css,jQuery,JavaScript,MySQL搭建博客系统
- 实例解析java + jQuery + json工作过程(获取JSON数据)
- JavaScript实现自适应窗口大小的网页
- [Javascript] Create Your First Iterator in JavaScript
- [Javascript] Iterate Over Items with JavaScript's for-of Loop
- [Javascript] Grouping and Nesting Console Log Output
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript] Linting JavaScript with ESLint
- jQuery Custom Selector JQuery自定义选择器
- 在JavaScript中使用json.js:使得js数组转为JSON编码
- 【JavaScript】浏览器
- [Javascript] Safely Access a Property on a JavaScript Array with Optional Chaining
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] How to use JavaScript's String.replace
- [Javascript] Hoisting in JavaScript
- [Javascript] Drawing Paths - Curves and Arcs
- javascript面向对象之Javascript 继承
- SAP Commerce Cloud JavaScript Storefront
- JavaScript里的...(三个点)操作符
- IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
- 【华为OD机试 2023】 最差产品奖(C++ Java JavaScript Python)
- 【华为OD机试 2023】快递业务站(C++ Java JavaScript Python)
- “checkbox”和“select”对象在javascript和jquery的操作差异做了整理
- 超越Web,Javascript在物联网的应用
- web前端框架Javascript开发基础之JavaScript作用域
- JavaScript 中 call()、apply()、bind() 的用法
- Kendo UI for jQuery 2023 R1 JavaScript 组件
- web前端框架Javascript开发基础之JavaScript作用域