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实现控制内容的向上向下滚动效果
Jun 26 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 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
世界上第一台立体声收音机
2021/03/01 无线电
php 小乘法表实现代码
2009/07/16 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
PHP数组相关函数汇总
2015/03/24 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
python增加图像对比度的方法
2019/07/12 Python
利用python实现逐步回归
2020/02/24 Python
python是怎么被发明的
2020/06/15 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
房地产还款计划书
2014/01/10 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
2014年质检员工作总结
2014/11/18 职场文书
学校推普周活动总结
2015/05/07 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL