JS从一组数据中找到指定的单条数据的方法


Posted in Javascript onJune 02, 2016

下面小编给大家介绍基于js如何从一组数据中找到指定的单条数据。具体方法如下所示:

在一般情况下,我们会要求后端在列表的时候输出一堆列表的JSON数据给我们,然后我们把这堆数据循环,就能在前端上显示列表了.

而我们在内容页的时候,则要求输出一个内容页的JSON数据给我们,我们就可以做内容页了.

但是,有时候,数据并不是特别复杂,我们可能需要从列表的数据中指定其中的单条数据.怎么做呢?

标准答案,find方法

var json = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"}];

如上所示,json是一个典型的列表数据.我如何指定找到ID=1的这条数据呢?

var data = json.find(function(e){return e.id == 1});
console.log(data);

通过这样的回调函数,就能找到列表数据中的单条数据了.

这段代码用了一个find方法,并且使用了一个回调函数.很优雅的解决了这个问题.下面,我将给出我的原始方案.

我的方案,for循环

上面的find方法是我通过搜索引擎找到的解决方法,点击此处: Array.prototype.find() .而我的原始解决方案如下:

var json = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"}];
var data = getJsonById(2,json);
function getJsonById(id,data){
for (var i = 0; i < data.length; i++) {
if (data[i].id==id) {
return data[i];
}
};
}

原理非常简单.通过循环遍历,找到和条件一致的内容,然后返回它即可.

以上内容是小编给大家介绍的JS从一组数据中找到指定的单条数据的方法,希望对大家有所帮助!

Javascript 相关文章推荐
查看大图功能代码jquery版
Nov 05 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
js倒计时显示实例
Dec 11 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 #Javascript
深入理解jQuery事件绑定
Jun 02 #Javascript
jQuery获取单击节点对象的方法
Jun 02 #Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 #Javascript
JavaScript核心语法总结(推荐)
Jun 02 #Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 #Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 #Javascript
You might like
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
php构造函数的继承方法
2015/02/09 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
在Python中表示一个对象的方法
2019/06/25 Python
python编写计算器功能
2019/10/25 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
365 Tickets英国:全球景点门票
2019/07/06 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
投标承诺函格式
2015/01/21 职场文书
2019年教师入党申请书
2019/06/27 职场文书
如何在Python中创建二叉树
2021/03/30 Python
MySQL sql_mode的使用详解
2021/05/08 MySQL