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 ui对话框实例代码
May 10 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 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开发模式(简写版)
2007/03/15 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
layDate插件设置开始和结束时间
2018/11/15 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Django实现学生管理系统
2019/02/26 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
焊接专业毕业生求职信
2013/10/01 职场文书
会计电算化专业毕业生自荐信
2013/12/20 职场文书
运动会稿件300字
2014/02/14 职场文书
四风问题对照检查材料
2014/09/22 职场文书
工作经历证明书范文
2014/11/02 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书