精华内容
下载资源
问答
  • json数组遍历(获取属性名和属性值) <script type="text/javaScript"> //数据为jsonArray var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}]; for(var i in data){ ...

    json数组的遍历(获取属性名和属性值)

    <script type="text/javaScript">
        //数据为jsonArray
        var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}];
    	for(var i in data){
                   alert(i)//显示的是 1、2、3等数值
    	    alert(data[i]);//显示为[object,object],不是我们想要的
                alert(data[i].name)//显示name属性的值
    	    for(var j in data[i]){
    		alert(j)//显示属性的名称
    		alert(data[i][j])//显示属性的值
    		}
    	}
     
            for(var n = 0;n<data.length;n++){
                alert(data[n])//和上面一样[[object,object]]
                alert(data[n].name)//[object,object]
                 for(var m in data[n]){
    		alert(j)//显示属性的名称
    		alert(data[i][j])//显示属性的值
    		}
     
    }	
    </script>
    

    ajax获取json数据成功,取值为undefined解决办法及原因
    解决办法:var dataObj=eval("("+data+")");//转换为json对象
    解决的问题

        $(document).ready(function() {
            $.ajax({
                url: "../../DahuaServlet",  // 请求路径
                type: "Get", //请求方式
                dataType: "json",//设置接受到的响应数据的格式
                data: {
                    action:"getVideoRecords",
                    token:"***********"  
                },
                success: function (data) {
                    const json = eval("(" + data + ")");
                    showData(json);//我们仅做数据展示
                },//响应成功后的回调函数
                error: function (data) {
                    alert("失败啦...")
                    //window.location.href="http://www.baidu.com";
                },//表示如果请求响应出现错误,会执行的回调函数
            });
            //展示数据
            function showData(json) {
                let str = "";//定义用于拼接的字符串
                const op = $("#op").html();
                for(const i in json){//遍历
                    //拼接表格的行和列
                    const ls = json[i];
                    str = "<tr><td>" + ls.recordId + "</td><td>" + ls.fileLength + "</td><td>" + ls.channelID + "</td>" +
                        "<td>" + ls.beginTime + "</td><td>" + ls.endTime + "</td><td>" + ls.type + "</td><td>" + op + "</td></tr>";
                    //追加到table中
                    $("#tab").append(str);
                }
            }
        });
    

    eval解析JSON中的注意点

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式:

    1.一种为使用eval()函数。

    2.使用Function对象来进行返回解析。

    使用eval函数来解析,并且使用jquery的each方法来遍历

    用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明。

    这里首先给出JSON字符串集,字符串集如下:

    代码如下:

    var data="
    {
    root:
    [
    {name:'1',value:'0'},
    
    {name:'6101',value:'北京市'},
    
    {name:'6102',value:'天津市'},
    
    {name:'6103',value:'上海市'},
    
    {name:'6104',value:'重庆市'},
    
    ]
    
    }";
    

    这里以jquery异步获取的数据类型——json对象和字符串为依据,分别介绍两种方式获取到的结果处理方式。

    1.对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象,以下举例说明:

    var dataObj=eval("("+data+")");//转换为json对象

    为什么要 eval这里要添加 “("("+data+")");//”呢?

    原因在于:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。

    加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的:

    alert(eval("{}"); // return undefined

    alert(eval("({})");// return object[Object]

    对于这种写法,在JS中,可以到处看到。

    : (function()) {}();  做闭包操作时等。
    
    alert(dataObj.root.length);//输出root的子对象数量
    
    $.each(dataObj.root,fucntion(idx,item){
    
    if(idx==0){
    
    return true;
    
    }
    
    //输出每个root子对象的名称和值
    
    alert("name:"+item.name+",value:"+item.value);
    
    })
    

    注:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变。

    2.对于服务器返回的JSON字符串,如果jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用 . g e t J S O N ( ) 方 法 获 得 服 务 器 返 回 , 那 么 就 不 需 要 e v a l ( ) 方 法 了 , 因 为 这 时 候 得 到 的 结 果 已 经 是 j s o n 对 象 了 , 只 需 直 接 调 用 该 对 象 即 可 , 这 里 以 .getJSON()方法获得服务器返回,那么就不需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以 .getJSON()evaljson.getJSON方法为例说明数据处理方法:

    $.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){
    
    //此处返回的data已经是json对象
    
    //以下其他操作同第一种情况
    
    $.each(data.root,function(idx,item){
    
    if(idx==0){
    
    return true;//同countinue,返回false同break
    
    }
    
    alert("name:"+item.name+",value:"+item.value);
    
    });
    
    });
    

    这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库,比如JSON in JavaScript就提供了一个不超过3k的脚本库。

    第二种解析方式就是使用Function对象来完成,它的典型应用就是在JQUERY中的AJAX方法下的success等对于返回数据data的解析

    var json=’{“name”:“CJ”,“age”:18}’;

    data =(new Function("","return "+json))();

    此时的data就是一个会解析成一个 json对象了.

    原文链接:https://blog.csdn.net/winner_xyy/article/details/81869667
    https://www.cnblogs.com/myjavawork/articles/1979279.html

    展开全文
  • 本文实例讲述了遍历 JSON 数组:var questions = data.data.questionnaire.questions;//遍历 json 数组for (var i in questions) {if (questions[i].type == '(单选)') {alert('danxuan');}}获取 JSON 数组长度:...

    本文实例讲述了

    遍历 JSON 数组:

    var questions = data.data.questionnaire.questions;

    //遍历 json 数组

    for (var i in questions) {

    if (questions[i].type == '(单选)') {

    alert('danxuan');

    }

    }

    获取 JSON 数组长度:

    function getJsonLength(json) {

    var jsonLength = 0;

    for (var i in json) {

    jsonLength++;

    }

    return jsonLength;

    }

    综合测试示例:

    //简单json数组:

    var jsonDemo ={"name":"\u811a\u672c\u4e4b\u5bb6","addtime":"2018-12-12","username":"jb51","id":5}

    //遍历json数组:

    for (var i in jsonDemo) {

    console.log(jsonDemo[i]);

    }

    //获取 JSON 数组长度:

    function getJsonLength(json) {

    var jsonLength = 0;

    for (var i in json) {

    jsonLength++;

    }

    return jsonLength;

    }

    console.log('数组长度:'+getJsonLength(jsonDemo))

    使用在线:http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得到如下运行结果:

    4b60773da7bf8f649688f45a51085e9b.png

    PS:这里再为大家推荐几款相关的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

    更多关于JavaScript相关内容可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

    展开全文
  • 前端数组json遍历3种方式总结

    千次阅读 2019-06-17 09:30:03
    需求:如何遍历得到mydata对象,过滤掉数组 数据集格式如下:包含mydata对象和myArray数组集合 [ {mydata:{id:1,createBy:“admin”},myArray:[“myarray1”,“myarray2”]}, {},… ] 假设数据存放于tempData中。 ...

    需求:如何遍历得到mydata对象,过滤掉数组

    • 数据集格式如下:包含mydata对象和myArray数组集合
      [
      {mydata:{id:1,createBy:“admin”},myArray:[“myarray1”,“myarray2”]},
      {},…
      ]
      假设数据存放于tempData中。

    1、循环遍历

    let data= [];
    tempData.forEach( (item, i) => {
              for (let key in item) {
              	// 判断key等于mydata对象,则把该对象放到data数组中
    	          if (key == "mydata") {
    	             data.push(item[key])
    	             }
             }
          });
    
    

    2、map方式1

    let data= [];
    tempData.map( item => {
               data.push(item.mydata);
       });
    

    2、map方式2(推荐,遍历再接收即可)

    let data= [];
    data = tempData.map( item => {
                       return item.mydata;
     });
    
    展开全文
  • json数组遍历并修改属性名

    千次阅读 2018-12-13 10:38:44
    json数组,修改属性名 不多说,直接上代码。 //把“name”属性名修改为“title”,并删除“name”这一项 var json = [ {id:0,name:'aa'}, {id:1,name:'bb'}, {id:2,name:'cc'}, {id:3,name:'dd'}, {id:4,name:'...

    json数组,修改属性名

    不多说,直接上代码。

    //把“name”属性名修改为“title”,并删除“name”这一项
    var json = [
    	{id:0,name:'aa'},
    	{id:1,name:'bb'},
    	{id:2,name:'cc'},
    	{id:3,name:'dd'},
    	{id:4,name:'ee'}
    ]
    for(var i in json){
    	for(var j in json[i]){
    		if(j == 'name'){
    			json[i]['title'] = json[i][j]//修改属性名为“title”
    			delete json[i]['name']//删除“name”
    		}
    	}
    }
    

    结果如下:
    在这里插入图片描述

    文末附带:json的遍历到底能遍历出什么鬼东西来…

    var json = [
    	{id:0,name:'aa'},
    	{id:1,name:'bb'},
    	{id:2,name:'cc'},
    	{id:3,name:'dd'},
    	{id:4,name:'ee'}
    ]
    for(var i in json){
    	console.log('i:',i)//key
    	console.log('json[i]:',json[i])//值
    	console.log('获取属性name的值',json[i].name)
    	for(var j in json[i]){
    		console.log('j:',j)
    		console.log('json[i][j]:',json[i][j])
    	}
    }
    

    结果直接上图:
    在这里插入图片描述在这里插入图片描述在这里插入图片描述

    完美!

    forEach遍历

    arr.forEach(function(value,index,array){//三个参数分别是数组元素、索引、数组本身
    	console.log(value+'--'+index+'--'+array)
    })
    
    展开全文
  • ajax使用json数组------前端往后台发送json数组及后台往前端发送json数组 1.引子 Json是跨语言数据交流的中间语言,它以键/值对的方式表示数据,这种简单明了的数据类型能被大部分编程语言理解。它也因此是前后端...
  • JSON数组遍历-在到div显示出内容

    千次阅读 2018-03-20 22:32:04
    ... ...//遍历数组 for循环 ...可以用for循环,也可以用for in 循环遍历数组,具体看工作需要; 这里html显示字段里面的值,不能直接 bb[i].years,需遍历出来; x + = y 相当于 x = x + y;
  • JavaScript数组遍历

    2020-05-03 21:42:38
    JavaScript数组遍历 作者:欧日鑫 撰写时间:2020年5月1日 js中的数组遍历是项目中经常用到的,在这里将几种方法做个对比。 for循环:使用评率最高,也是最基本的一种遍历方式。 let arr = ['a','b','c','d','e']...
  • 大致需求为类型限制根据类型获取不同结果列表,再根据模糊查询搜索出结果,效果如下:…例子:利用AJAX返回JSON数据,间接访问数据库,查出Nation 表,并用下拉列表显示 造一个外部下拉列表框 JQurey代码 $(document).ready...
  • 本文实例讲述了JS遍历JSON数组及获取JSON数组长度操作。分享给大家供大家参考,具体如下:遍历 JSON 数组:var questions = data.data.questionnaire.questions;//遍历 json 数组for (var i in questions) {if ...
  • 数组的方法清单 link 数组的类型相关: 方法 描述 备注 Array.isArray() 判断是否为数组 toString() 将数组转换为字符串 Array.from(arrayLike) 将伪数组转化为真数组 Array.of(value1, value2, ...
  • [这个是我的后台定义的json数组,ce是arraylist](https://img-ask.csdn.net/upload/201603/01/1456799403_423415.png)这个是我的后台定义的json数组,ce是arraylist ![这个是我的ajax,怎么在里面遍历arr]...
  • [{"sno":"01 ","sname":"张三 ","ssex":"1"},{"sno":"02 ","sname":"李四 ","ssex":"0"}] 输出data是这个样子的,我用typeof,输出的类型是string,如何将他遍历输出呢
  • 1.对象的函数解构 let json={ a:"websong", b:"web" ...function fnu({a,b}) {//非常有用,这里对应的是传入对象的参数,操作对象很便捷 ...fnu(json);...let arr=['websong','js','前端']; funct...
  • 本文实例讲述了JS简单循环遍历json数组的方法。分享给大家供大家参考,具体如下: 例如数据库里面的json字符串是这样的 var str = '[{"name":"宗2瓜","num":"1","price":"122"},{"name":"宗呱呱","num":"1","price...
  • 最近在写关于购物车的本地存储的前端技术,这里是关于如何把一个二维数组内部的信息呈现在页面上。 一般来说本地存储时,存储的是关于店铺的信息和店铺内部商品的信息.本地存储时把数组转换成Json串存储的。这里...
  • json数组中提取所需值,组成新的json数组 var dataTank =[];//创建容器 var oldData = data;//获取Json数据 for (var i=0;i<oldData.length;i++){ //提取所需值组成新数组 dataTank.push({“name”:income[i]....
  • I have the following data taken from an API. I am trying to access the restaurant name using a Python script and have the script display ... Here are my files:test.pywith open('data.json') as data_fil...
  • 返回json数组id2.json id数组之间差集3.根据id数组生成新数组4.判断json对象相等5.去重6.返回update的数组7.输入两组json数组返回差集获得新增的数组步骤与对应方法获得修改过的的数组步骤与对应方法调用代码与...
  • 少年最好的地方就是:嘴里说着要放弃,心里却都憋着一口气。...JSON简介:什么是JSON -> https://blog.csdn.net/Qizhi_Hu/article/details/105305616 JSON解析之Fastjson:https://blog.csdn.net/Qizhi_Hu/ar...
  • 前端学习之——js解析json数组

    万次阅读 多人点赞 2017-05-04 17:00:33
    **前端学习之——js解析json数组** 解析json数组即对JSONArray的遍历一、对于标准的json数组如:var result=[{"flag":1,"macId":"2","mbId":0,"userName":"XXX"},{"flag":1,"macId":"1","mbId":1,"userName":"YYY"}]...
  • 数组each遍历渲染如何给第一个div添加class 并且在点击每个div的时候,有被选中的效果 其他div背景颜色移除 被点击的div背景颜色添加。 <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,768
精华内容 8,307
关键字:

json数组前端遍历