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 相关文章推荐
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
理解jQuery stop()方法
Nov 21 Javascript
javascript如何创建对象
Aug 29 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
浅谈JavaScript 声明提升
Sep 14 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
一个取得文件扩展名的函数
2006/10/09 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
javascript回到顶部特效
2016/07/30 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python3遍历目录树实现方法
2015/05/22 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python交互式图形编程实例(二)
2017/11/17 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python使用递归的方式建立二叉树
2019/07/03 Python
python对csv文件追加写入列的方法
2019/08/01 Python
如何使用python代码操作git代码
2020/02/29 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
初级Java程序员面试题
2016/03/03 面试题
测绘工程系学生的自我评价
2013/11/30 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
学校消防安全制度
2014/01/30 职场文书
小学毕业感言500字
2014/02/28 职场文书
大学学风建设方案
2014/05/04 职场文书
党支部培养考察意见
2015/06/02 职场文书
活动简报范文
2015/07/22 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
HttpClient实现表单提交上传文件
2022/08/14 Java/Android