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 相关文章推荐
url地址自动加#号问题说明
Aug 21 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
对比分析json及XML
Nov 28 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 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 smarty的预保留变量总结
2008/12/04 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php 伪静态之IIS篇
2014/06/02 PHP
PHP之预定义接口详解
2015/07/29 PHP
详解php中反射的应用
2016/03/15 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
js函数般调用正则
2008/04/08 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python 编码规范整理
2018/05/05 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Python 爬虫性能相关总结
2020/08/03 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
优秀员工评语
2014/02/10 职场文书
党支部换届选举方案
2014/05/08 职场文书
个人借款协议书范本
2014/11/17 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
深入理解go slice结构
2021/09/15 Golang