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实现的所谓的滑动门
May 23 Javascript
一组JS创建和操作表格的函数集合
May 07 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
浅谈TypeScript的类型保护机制
Feb 23 Javascript
js实现选项卡效果
Mar 07 Javascript
详细分析vue响应式原理
Jun 22 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 采集获取指定网址的内容
2010/01/05 PHP
php表单提交问题的解决方法
2011/04/12 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
简述vue中的config配置
2018/01/23 Javascript
详解React中setState回调函数
2018/06/14 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python对象转JSON字符串的方法
2016/04/27 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python 显示数组全部元素的方法
2018/04/19 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
安全目标管理责任书
2014/07/25 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
缅怀先烈主题班会
2015/08/14 职场文书