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 文字符串转换unicode编码函数
May 30 Javascript
一些mootools的学习资源
Feb 07 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
react redux入门示例
2018/04/19 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
如何让Java程序执行效率更高
2014/06/25 面试题
市场部管理制度
2014/02/02 职场文书
勤俭节约倡议书
2014/04/14 职场文书
《学棋》教后反思
2014/04/14 职场文书
领导班子整改措施
2014/10/24 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
vue实现锚点定位功能
2021/06/29 Vue.js