前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >怎么获取遍历出来json数据的某一条信息的详细信息

怎么获取遍历出来json数据的某一条信息的详细信息

作者头像
何处锦绣不灰堆
发布2020-05-29 12:17:36
1.2K0
发布2020-05-29 12:17:36
举报
文章被收录于专栏:农历七月廿一农历七月廿一

我今天遇到遇到一个很恶心的问题,场景是这样的,就是说,如果您用ajax取到后端的数据,遍历了出来,这个时候是一条条的展示出来的,但是展示只是json数据里面的某一个信息,例如是姓名啊,这个时候需要的是用户点击某一个姓名的时候将这个人的所有信息拿到,不知道我描述的是不是可以让您理解,举个例子:

这是遍历出来的数据,ok,我们看一下源数据:

这是一个很标准的json数据,一般后端会给我们传一个类似于这样的数据过来,要求是页面上只展示remarks,别的是用户点击的时候才展示,问题这样描述应该明白了吧!

ok这个时候我们有三种解决方案:一个一个的介绍:

第一个是:让后端写一个接口,数据是有唯一的ID的,这个时候我们遍历拿到的数据是有ID的,那么写一个函数将ID传递给他,他根据ID查数据库,将查询的结果返回过来,我们取到,展示出来,

我简单的写一个代码,不要复制,我直接写的额,不是用编辑器写的,不保证是对的,只是提供一个思路:

代码语言:javascript
复制
遍历拿到数据(我要求的是显示9条数据)
代码语言:javascript
复制
<script type="text/javascript">
		    var allinfo;
		    var length;
		
		    window.onload = function(){
		    allinfo = codes.data.partake;
		    length =  allinfo.length;
			var count;
			//怎么获取遍历出来json数据的某一条信息的详细信息
			if(length < 10){
				count = length;
			}else{
				count = 9;
			}
			for(var i= 0;i<count;i++){
				console.log(allinfo[i].id);
				var add_testdiv = '<a onclick = "detal_div('+allinfo[i].id+')"><span>'+allinfo[i].remarks+'</span><br /></a>';
				$("#test_div").append(add_testdiv);					
			}
		}
代码语言:javascript
复制
页面div(自己可以做好看一些,我只是演示效果)
代码语言:javascript
复制
<div id="test_div">
		</div>
		<div id="test_detal">
		</div>
代码语言:javascript
复制
发送接口的函数
代码语言:javascript
复制
function detal_div(e){
				$.ajax({
					type:"get",
					url:"url",
					async:false,
					data : {
						id : e;
					},
					success : function(data){
						if(data == 200){
							//拿到返回数据
						}
					}
				});
		}

第二个方案是直接将所有的数据全部拿到,根据ID的不同,拿到对应的数据:

代码语言:javascript
复制
之前的遍历数据是一样的,就不重复了,这里怎么拿到页面上对应的数据是下面的js
代码语言:javascript
复制
function detal_div(e){
		        console.log(e);
			    var add_testdetal = '<span>'+allinfo[e-1].remarks+'</span><br /><span>'+allinfo[e-1].companyName+'</span><br />';
				$("#test_detal").append(add_testdetal);	
		 
		}

那么这里解释一下,就是为什么拿到了ID,拿别的数据内容的时候需要的ID-1的操作,很多人写的时候都会忽略这一点,因为数组是从0开始的,我们吧遍历出的结果ID是从1开始的,所以会出现数据对应不上的情况,所以这里需要注意一下,不然数据拿到的不是自己想要的。

第三种方案:将数据全部拿到,也全部取出来,将多余的部分隐藏,然后需要的时候点击显示就行了,这个就不演示也不写源码了,毕竟就是一个隐藏与显示,jQuery提供的现成的办法有好多种:分别是fadein、fadeout....自己看一下这里就不一一列举了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-05-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档