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 相关文章推荐
js 判断上传文件大小及格式代码
Nov 13 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
Element InputNumber 计数器的实现示例
Aug 03 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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
python排序方法实例分析
2015/04/30 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
创先争优制度
2014/01/21 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
党支部综合考察材料
2014/05/19 职场文书
内科护士节演讲稿
2014/09/11 职场文书
二胎满月酒致辞
2015/07/29 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python