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 HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
通过JS深度判断两个对象字段相同
Jun 14 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字符串的递增和递减示例介绍
2014/02/11 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
3种vue组件的书写形式
2017/11/29 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
护理专业学生的求职信范文
2013/12/11 职场文书
2015年团支部工作总结
2015/04/03 职场文书
青涩记忆观后感
2015/06/18 职场文书
HAM-2000摩机图
2021/04/22 无线电
Python网络编程之ZeroMQ知识总结
2021/04/25 Python