使用JS数组迭代方法渲染页面数据并实现查询功能

使用数组迭代方法渲染页面数据并进行简单的查询

一、页面预览

二、需求分析

将data里的数据动态渲染到页面上

data = [{id:1,pname:"小米",price:3999},{id:2,pname:"华为",price:7999},{id:3,pname:"三星",price:9999},{id:4,pname:"oppo",price:6999},{id:5,pname:"vivo",price:5999},]

筛选出指定价格范围内的商品

三、基本思路

使用forEach()方法遍历data数组，生成对应的表格，并将数据展示在表格中
使用filter()方法筛选出对应的数据，封装到一个新数组里；遍历新数组，生成对应的表格，并将数据重新展示在表格中

四、相关代码

页面结构

<div class="search"><label for="">按价格查询:</label><input type="text" class="start"> - <input type="text" class="end"><button class="sousuo">搜索</button>
</div>
<table><thead><tr><th>id</th><th>产品名称</th><th>价格</th></tr></thead><tbody><!--  --></tbody>
</table>

功能代码

<script>var data = [{id:1,pname:"小米",price:3999},{id:2,pname:"华为",price:7999},{id:3,pname:"三星",price:9999},{id:4,pname:"oppo",price:6999},{id:5,pname:"vivo",price:5999},];
let that = null;
class Find{constructor(){that = this;// 获取tbodythis.tbody = document.querySelector("tbody");//获得数组this.data = data;// // 获取起始价格的表单 构造函数只会在页面刷新时执行一次,无法动态获取表单里的数据// this.star = document.querySelector(".start");// // 获取最高价的表单// this.end = document.querySelector(".end");// 获取搜索按钮this.button1 =  document.querySelector(".sousuo");//页面渲染时先获取所有数据this.setData(data);//搜索方法this.button1.onclick = this.find;}// 设置搜索按钮的点击方法find(){// 每次点击都可以实时获得输入框的值let star = document.querySelector(".start").value;let end = document.querySelector(".end").value;console.log(star);console.log(end);const newData =  that.data.filter((item,index,array)=>{return item.price >= star &&  item.price <= end});if(newData.length){that.setData(newData);}else{// 简单设置一个查询异常情况let error = [{id:"没有查询到指定商品"}];that.setData(error);}}// 页面渲染时先获取所有数据setData(myData){// 先清空列表数据,再渲染that.tbody.innerHTML = "";myData.forEach((item,index,arr)=>{that.tbody.innerHTML += `<tr><th>${arr[index].id}</th><th>${arr[index].pname}</th><th>${arr[index].price}</th></tr>`;
})
}
}
// 创建一个实例对象
let find = new Find();
</script>

使用JS数组迭代方法渲染页面数据并实现查询功能相关推荐

js 数组遍历方法详解（map、filter、find、findIndex、reduce）
目录前言 map map是什么 map方法的结构及入参语法糖 map一般不改变原数组 filter 说明例子 find 和 findIndex 说明例子 reduce 说明例子尾言前言 ...
js数组查找方法 find() findIndex() - Kaiqisan
js数组查找方法 find() findIndex() ヤッハロー.Kaiqisanすうう.一つふつうの学生プログラマである,今天继续讲讲数组查询方法,,这俩方法更加适合于数组. 没错,就是数组专用的 ...
在js对象上绑定js数组原生方法
在js对象上绑定js数组原生方法在js对象上绑定数组方法会给当前对象添加一个lenght:0属性例: var o = {}; [].pop.call(o) console.log(o)//返回结果 ...
JS数组去重方法记录
js数组去重方法 1.遍历数组,建立新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组代码如下(示例): function getArray(ar) {va ...
JS中数组迭代方法（JavaScript从入门到疯癫）
数组迭代的方法包含了以下七个( map,filter,forEach,some,every, findIndex,reduce) 目录 1.map 2.filter 3.foreach 4.数组som ...
JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
js数组往队头添加数据、js数组从队头移出数据
1.js数组往队尾添加数据可以用数组API Array.prototype.push 可以往数组尾部添加元素 2.js数组往队尾添加数据可以用数组API Array.prototype.pop 可以把 ...
JS进阶篇--JS数组reduce()方法详解及高级技巧 1
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
JS数组去重方法小结
JS数组去重看了网上很多数组去重方法,用的比较常见的大概就几种,今天想自己来做一个总结. 部分内容参考该博客 1 . 在原数组上操作(基本方法) 思路:利用循环嵌套,判断数组中每个元素与其后面的元素 ...
js数组所有方法(超级详细，超细总结)
数组 1. 数组转字符串 1.1 toString() 方法 toString() 在把数组转换成字符串时,首先要将数组的每个元素都转换为字符串.当每个元素都被转换为字符串时,才使用逗号进行分隔,以列 ...

使用JS数组迭代方法渲染页面数据并实现查询功能

使用数组迭代方法渲染页面数据并进行简单的查询

一、页面预览

二、需求分析

三、基本思路

四、相关代码

使用JS数组迭代方法渲染页面数据并实现查询功能相关推荐

最新文章

热门文章