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 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
Js 中debug方式
Feb 07 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
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
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
JS实现标签页效果(配合css)
2013/04/03 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
Vue头像处理方案小结
2018/07/26 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
python不同版本的_new_不同点总结
2020/12/09 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
教师年终个人自我评价
2013/10/04 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
女子职高个人自荐书
2014/02/01 职场文书
简历自我评价模板
2015/03/11 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript