JS如何遍历去重&&下拉框动态获取后台数据

最新推荐文章于 2023-10-31 17:52:57 发布

只为梦惜晨

最新推荐文章于 2023-10-31 17:52:57 发布

阅读量1.3k

点赞数 1

分类专栏： JS去重文章标签： js layui

本文链接：https://blog.csdn.net/weixin_44347111/article/details/116519811

版权

JS去重专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS实现遍历去重，需要掌握两个工具，一个是 $. e a c h (), 另一个就是 a r r . i n d e x o f (v a l u e, i n d e x, a r r), 其中，$ .each是JQuery的循环遍历，indexof负责去重

JS去重后动态获取后台数据
JS在这里插入图片描述

演示代码：
html代码

 <label>出发地:</label>
      <div class="select1_inner">
            <select id="list_name" name="list_name" lay-verify="required"
                    class="select2 select" lay-search>
                <option value="0">请选择出发地</option>
            </select>
        </div>

js代码

layui.use('form', function () {
        var $ = layui.$
        var form = layui.form
        $.ajax({
            url: '/bookplane/findAll',
            type: 'GET',
            dataType: 'json',
            success: function (data1) {
                var data = data1.data; //提出返回数据中的data
                var resultBefore = [], resultAfter = [];
                var arr = this, len = arr.length;

                //1、将PO中的一个属性塞进List[]中
                if (data !== null) {
                    $.each(data, function (index, item) { //循环加入 data的元素
                        resultBefore.push(item.startPoint);
                    });

                    //2、对数据进行遍历去重
                    resultBefore.forEach(function (value, index, resultBefore) {  //value是当前项，index是索引，resultBefore是原始数组
                        var bool = resultBefore.indexOf(value, index + 1);  //从传入参数的下一个索引值开始寻找是否存在重复
                        if (bool === -1) {//bool值表示从当前索引往后查找，找到相同的参数，即将该参数对应的索引显示出来，没有则返回-1
                            resultAfter.push(value);
                        }
                    });

                    //3、将去重后的数据依次添加进下拉框列表
                    resultAfter.forEach(function (startPoint) {
                        $('#list_name').append(new Option(startPoint));
                    })
                } else {
                    $("#list_name").append(new Option('无数据', ''));
                }
                //重新渲染
                form.render('select');
            }
        });
    });

controller层

    /**
     * 查询全部数据
     * @return
     */
    @ResponseBody
    @RequestMapping(value="/findAll",method= RequestMethod.GET)
    public Result findAll(){
        return new Result(true, StatusCode.OK,"查询成功",bookPlaneService.findAll());
    }