Javascript根据id获取数组对象
在业务中,列表页跳转详情页时,经常会将Id值传入,然后再根据id值异步获取数据。
假设有服务端的json数据: <注意,这里的data是指已经从后端获取的json, 而非后端原始的文件>
let data = [
{id: 1, title: 'React'},
{id: 2, title: 'Vue'},
{id: 3, title: 'Angular'},
{id: 4, title: 'Django'},
{id: 5, title: 'Laravel'}
]
在前端,根据id,获取详情
getDetail(_id) {
let result = data.find((item) => {
return item.id == _id
})
console.log(result)
}
/*
_id是列表页传进来的id值, 注意:使用==, 如使用===必须左右值的类型相同
对比item.id 是否等于_id, 如相等,则返回。
*/
延伸:数组过滤方法还有filter,for循环,forEach
filter遍历整个数组,可以返回多个结果.
而find找到的第一个立即返回,不会继续往下遍历。
Javascript根据id获取数组对象的更多相关文章
- JavaScript 获取数组对象中某一值封装为数组
1.获取数组对象中某一值封装为数组(一) data = [["2000-06-05",116],["2000-06-06",129]]; var dateLis ...
- JavaScript通过ID获取元素坐标
JavaScript通过ID获取元素坐标 function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase ...
- JavaScript中的类数组对象
在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"]; / ...
- javascript事件:获取事件对象getEvent函数
在javascript开发中我们会经常获取页面中的事件对象,然后来处理这些事件,例如下面的getEvent函数就是获取javascript下的页面事件对象. function getEvent(eve ...
- java基础64 JavaScript中的Arrays数组对象和prototype原型属性(网页知识)
1.Arrays数组对象的创建方式 方式一: var 变量名=new Array(); //创建一个长度为0的数组. 方式二: var 变量名=new Array(长度); //创建一个指定长度的数组 ...
- JavaScript通过id获取不到元素是什么原因阿?
s代码 JavaScript code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function show_more_mess() { $(&qu ...
- Jquery判断$("#id")获取的对象是否存在的方法
如果是下面的 jquery 代码判断一个对象是否存在,是不能用的 if($("#id")){ }else{} 因为 $(“#id”) 不管对象是否存在都会返回 object . 正 ...
- Jquery判断$("#id")获取的对象是否存在
一.判断对象对象是否存在 如果是下面的 jQuery 代码判断一个对象是否存在,是不能用的 代码如下: if($("#id")){ }else{} 因为 $(“#id”) 不管 ...
- JavaScript把两个数组对象合并成一个一一对应的数组对象
合并数组或者对象在数组或对象前面加...,是es6的新写法,然后数组的map方法会返回数组. var obj1 = [{ , "model": "XQG70-S1208F ...
随机推荐
- sping加载bean都发生了些什么
问题描述:使用@Autowired注入的类,没有实例化 //Controller @RequestMapping(value="/deepblue") @Controller pu ...
- 【规范】前端编码规范——jquery 规范
使用单引号 不推荐 $("div").html("<img src='1.jpg'>"); 推荐 $('div').html('<img sr ...
- C#高阶与初心:(一)List.Add添加的到底是什么?
前几日与同事讨论一个相对复杂的场景,需要先将中间过程存储在List中,稍后再用.同时程序类的许多线程共用了一个全局变量. 具体来说就是如下代码 ... _order = order1; _list.A ...
- 深度讲解 .net session 过期机制
[参考]net session过期 原理及解决办法 [参考]深入理解session过期机制
- Apple Watch S3 解锁 MacBook Pro 2015版失败的解决办法
我的MacBook Pro MF839由于只有128G的内存,所以就只能藏在我的抽屉底下,偶尔想体验一下xcode的时候再拿回来用下,想想都浪费 也不是不想换SSD,只是看了一下,价格太贵了,256G ...
- CentOS安装和配置Docker和Nginx
纯粹记录下: 1 安装Docker容器: yum install docker-ce 2. 搜索官网nginx docker search nginx 3. 找到需要的版本安装: docker pul ...
- 【Dubbo 源码解析】07_Dubbo 重试机制
Dubbo 重试机制 通过前面 Dubbo 服务发现&引用 的分析,我们知道,Dubbo 的重试机制是通过 com.alibaba.dubbo.rpc.cluster.support.Fail ...
- js 注意
1.如果想要动态加清除浮动的代码,可以这样做: document.getElementById("mainBody").innerHTML += "<div sty ...
- FTP连接服务器总报错的问题解决
在使用宝塔面板的时候,我在使用FTP的时候,总有这样的问题,FTP老是连接不上,花了两个小时左右的时间总算找到问题:端口问题. 首先一般的FTP端口是:21,22,我这里就改成:9527 了 然后回到 ...
- hibernate03增删改查
<?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hiber ...