JS从一组数据中找到指定的单条数据的方法

 更新时间:2016年06月02日 09:52:55   作者:FungLeo  
这篇文章给大家介绍基于js如何从一组数据中找到指定的单条数据,非常实用,实现方案也很简单,需要的朋友可以参考下

下面小编给大家介绍基于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从一组数据中找到指定的单条数据的方法,希望对大家有所帮助!

相关文章

  • JS中的6种打断点的方式实例总结

    JS中的6种打断点的方式实例总结

    断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了,下面这篇文章主要给大家介绍了关于JS中6种打断点方式的相关资料,需要的朋友可以参考下
    2022-04-04
  • JavaScript中利用Array和Object实现Map的方法

    JavaScript中利用Array和Object实现Map的方法

    这篇文章主要介绍了JavaScript中利用Array和Object实现Map的方法,实例分析了javascript实现map的添加、获取、移除、清空、遍历等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 关于Bootstrap按钮组件消除黄框的方法

    关于Bootstrap按钮组件消除黄框的方法

    这篇文章主要介绍了Bootstrap按钮组件消除黄框的方法,需要的朋友可以参考下
    2017-05-05
  • 如何在uni-app使用微软的文字转语音服务

    如何在uni-app使用微软的文字转语音服务

    有了语音识别,交流就会变得很简单,下面这篇文章主要给大家介绍了关于如何在uni-app使用微软的文字转语音服务的相关资料,需要的朋友可以参考下
    2022-06-06
  • 微信小程序开发(二):页面跳转并传参操作示例

    微信小程序开发(二):页面跳转并传参操作示例

    这篇文章主要介绍了微信小程序开发页面跳转并传参操作,结合实例形式详细分析了微信小程序页面跳转并传参相关操作技巧,需要的朋友可以参考下
    2020-06-06
  • javascript笔试题目附答案@20081025_jb51.net

    javascript笔试题目附答案@20081025_jb51.net

    网上找的javascript笔试题目,留档给自己作参考。
    2008-10-10
  • 微信小程序自定义菜单导航实现楼梯效果

    微信小程序自定义菜单导航实现楼梯效果

    在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果。在框架中vant UI框架也为我们实现了这一效果。接下来通过本文给大家介绍微信小程序自定义菜单导航实现楼梯效果,感兴趣的朋友一起看看吧
    2021-12-12
  • JS中的async与await怎么使用

    JS中的async与await怎么使用

    这篇文章主要介绍了JS的async/await怎么使用,简单来说,async/await是基于promises的语法糖,使异步代码更易于编写和阅读,下面来看详细的介绍内容吧。需要的小伙伴也可以参考一下
    2021-12-12
  • JS实现Excel文件与图片视频上传

    JS实现Excel文件与图片视频上传

    这篇文章主要为大家学习介绍了JavaScript如何实现Excel文件与图片视频上传,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-07-07
  • qq悬浮代码(兼容各个浏览器)

    qq悬浮代码(兼容各个浏览器)

    qq悬浮代码(兼容各个浏览器)。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论