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 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
js获取Get值的方法
Sep 29 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
vue之数据交互实例代码
Jun 16 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
原生JS实现汇率转换功能代码实例
May 13 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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
python实现简易通讯录修改版
2018/03/13 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
竞选演讲稿范文
2013/12/28 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
公司会议开幕词
2016/03/03 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python
一文简单了解MySQL前缀索引
2022/04/03 MySQL
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL