根据id删除数组中指定的obj这一项

已于 2023-08-14 18:05:33 修改
阅读量791 收藏 2
点赞数
分类专栏： JavaScript 文章标签： javascript
于 2020-09-29 17:46:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41646249/article/details/108872729
版权

在做删除的时候我们删除了后台数据，不想在对数据进行查询更新，此时可以在前端对数组进行删除 

示例：
list:[
    {
        id:0
        name:'xiaomin'
    },
    {
        id:1
        name:'xiaohong'
    },
]
list = list.filter(item => item.id !== 你要删除的ID)

 具体案例如下：

code处理方法 

// 双击那个车站 取消哪个
    clickStationCancel(stationId){
      console.log("stationId:", stationId, this.selectedLineData);
      this.selectedLineData.map(v=>{
        if (v.stationList) {
          v.stationList.map(k=>{
            v.stationList = v.stationList.filter(item => item.station.tccStationId !== stationId)
          })
        }
      })
      console.log("resultData:", this.selectedLineData);
      this.selectedLineData = JSON.parse(JSON.stringify(this.selectedLineData));
    },

    // 双击线路 取消本条线路的
    clickLineCancel(lineId){
      console.log("lineId:",lineId);
      let newData = this.selectedLineData;
      newData = newData.filter(item => item.lineInfo.lineId !== lineId);
      this.selectedLineData = JSON.parse(JSON.stringify(newData));
      console.log("selectedLineData:", this.selectedLineData);
    }

全部代码如下： （有需要的可以用vue项目测试一下，包括前2天发布的特殊数据结构组装处理）

<template>
  <!-- 已选线路/车站/分区 -->
  <Modal v-model="modal3" :mask-closable="false" width="900" title="测试">
  <div id="lineStationZone">
    <Span style="width:100%;float:left;">已选线路/车站/分区</Span>
    <div class="question" z-index="1002">
      <div class="select_circuit" v-for="(item, index) in selectedLineData" :key="index">
        <span class="select_line" @dblclick="clickLineCancel(item.lineInfo.lineId)" v-if="item.stationList.length > 0 "> {{item.lineInfo.lineName}} </span>
        <div class="select_station">
          <ul v-for="(list, i) in item.stationList" :key="i">
            <li>
              <Poptip word-wrap trigger="hover" placement="top" z-index="1003" :title="list.station.stationSname + '/' + '分区:'" width="300" v-if="list.station !== null">
                <span class="stand" @dblclick="clickStationCancel(list.station.tccStationId)" >{{ list.station.stationSname}}</span>
                <span class="district" :class="[list.itemChecked.length == 0 ? 'district_0' : 'district_1']">共{{list.itemChecked.length}}个分区</span>
                <div slot="content">
                  <div class="poptip_line" v-if="list.broadcastSubareaInfo.length > 0">
                    <el-checkbox-group v-model="list.itemChecked" @change="poptip_checkedChange">
                      <el-checkbox-button v-for="i in list.broadcastSubareaInfo" :label="i.areaId" :key="i.areaId">
                        {{i.areaName}}
                      </el-checkbox-button>
                    </el-checkbox-group>
                  </div>
                </div>
              </Poptip>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  </Modal>
</template>

<script>
export default {
  data(){
    return {
      modal3: false,
      selectedLineData: [],
      result_checked: [], //最后所有被选中的值
    }
  },
  methods:{
    // 已选线路/车站/分区选中    
    poptip_checkedChange(data) { 
      console.log("poptip 分区选中:", data);
      //回显全部选中
      let checked = [];
      this.selectedLineData.map(v=>{
        v.stationList.map(k=>{
          k.itemChecked.map(m=>{
            checked.push(m);
          })
        })
      })
      checked = [...new Set(checked)];
      console.log("checked:", checked);
    },
    // 双击那个车站 取消哪个
    clickStationCancel(stationId){
      console.log("stationId:", stationId, this.selectedLineData);
      this.selectedLineData.map(v=>{
        if (v.stationList) {
          v.stationList.map(k=>{
            v.stationList = v.stationList.filter(item => item.station.tccStationId !== stationId)
          })
        }
      })
      console.log("resultData:", this.selectedLineData);
      this.selectedLineData = JSON.parse(JSON.stringify(this.selectedLineData));
    },
    // 双击线路 取消本条线路的
    clickLineCancel(lineId){
      console.log("lineId:",lineId);
      let newData = this.selectedLineData;
      newData = newData.filter(item => item.lineInfo.lineId !== lineId);
      this.selectedLineData = JSON.parse(JSON.stringify(newData));
      console.log("selectedLineData:", this.selectedLineData);
    }
  },
  created(){},
  mounted(){
    // 后台返回的数据
    let historyData = {
        "0637":[
          {
            "areaId": "04010637100000001",
            "areaName": "分区001",
            "areaType": "1",
            "lineId": "06",
            "lineName": "6号线",
            "stationName": "南锣鼓巷",
            "stationId": "0637",
            "boardAreaNo": 1
          }, {
            "areaId": "04010637100000002",
            "areaName": "分区002",
            "areaType": "1",
            "lineId": "06",
            "lineName": "6号线",
            "stationName": "南锣鼓巷",
            "stationId": "0637",
            "boardAreaNo": 1
          }, {
            "areaId": "04010637100000003",
            "areaName": "分区003",
            "areaType": "1",
            "lineId": "06",
            "lineName": "6号线",
            "stationName": "南锣鼓巷",
            "stationId": "0637",
            "boardAreaNo": 1
          }
        ],
      "0639":[
          {
            "areaId": "04010639100000001",
            "areaName": "分区01",
            "areaType": "1",
            "lineId": "06",
            "lineName": "6号线",
            "stationName": "东四",
            "stationId": "0639",
            "boardAreaNo": 1
          }, {
            "areaId": "04010639100000002",
            "areaName": "分区02",
            "areaType": "1",
            "lineId": "06",
            "lineName": "6号线",
            "stationName": "东四",
            "stationId": "0639",
            "boardAreaNo": 1
          }, {
            "areaId": "04010639100000003",
            "areaName": "分区03",
            "areaType": "1",
            "lineId": "06",
            "lineName": "6号线",
            "stationName": "东四",
            "stationId": "0639",
            "boardAreaNo": 1
          }
        ],
      "0201":[
        {
          "areaId": "04010201100000001",
          "areaName": "分区1",
          "areaType": "1",
          "lineId": "02",
          "lineName": "2号线",
          "stationName": "西直门",
          "stationId": "0201",
          "boardAreaNo": 1
          },
        {
          "areaId": "04010201100000002",
          "areaName": "分区2",
          "areaType": "1",
          "lineId": "02",
          "lineName": "2号线",
          "stationName": "西直门",
          "stationId": "0201",
          "boardAreaNo": 1
          }
      ]
    };

    let resultAllData = [];
    let resultStation = [];
    let lines = [];
    for(let k in  historyData) {
      let station =  {
        broadcastSubareaInfo: [],
        itemChecked: []
      };

      let lineId = '';
      let lineName = '';
      historyData[k].map(v => {
         station.broadcastSubareaInfo.push({
          areaId: v.areaId,
          areaName: v.areaName
        })
         station.itemChecked.push(v.areaId)
         station.station = {
          tccStationId: v.stationId,
          stationSname: v.stationName
        }
       lineId = v.lineId
       lineName = v.lineName
      })

      resultStation.push({
        lineInfo: {
           lineId:  lineId,
           lineName:  lineName,
        },
        stationList: station
      })
      lines.push(lineId);
    }

    lines = [...new Set(lines)];
    
    lines.map(line => {
      let station = [];
      let lineInfo = {};
      resultStation.map(v => {
        if( line == v.lineInfo.lineId) {
          station.push(v.stationList);
          lineInfo = v.lineInfo;
        }
      })
      resultAllData.push({
        lineInfo: lineInfo,
        stationList: station
      }) 
    })
    console.log("组合后的数据:", resultAllData);
    this.selectedLineData = resultAllData;
  },
  destroyed(){
    this.$destroy();
  }
}
</script>

<style lang = "scss">
  #lineStationZone{
  .question{ width:100%;height:200px;border:1px solid #c5c8ce;float:left; overflow-y: scroll;}
  .el-checkbox-button__inner{
    background: #DCDFE6;
    border-radius: 18px;
    margin:5px;
    padding: 3px;
  }
  .el-checkbox-button.is-checked .el-checkbox-button__inner{
    background-color: #409EFF;
    box-shadow: -1px 0 0 0 #8cc5ff;
    color: #fff
  }
  .select_circuit{
    width:100%;
    height: auto;
    /* float:left; */
    display: flex;
    flex-direction: row;
    padding: 5px 0px;
  }
  .select_line{width:60px;height:26px;line-height:26px;text-align: center; float:left;margin-left: 6px;margin-right: 30px;margin-top: 6px; background: #409EFF;border-radius: 15px;color: #fff}
  .select_station{width:90%;height:auto;float:left}
  .select_station li{width:90px;height:46px;float:left;list-style: none;margin-left:10px;margin-top: 6px;}
  .select_station li .stand{width:100%;height:26px;line-height: 26px;text-align: center ;float:left;background: #409EFF;border-radius: 5px;color: #fff}
  .select_station li .district{width:100%;height:20px;line-height: 20px;text-align: center; float:left;border-radius: 5px;}
  .district_0{color: red}
  .district_1{color: #999}
  .partition li{width:50px;height:20px;line-height: 20px;text-align: left;}
  .ivu-poptip-popper {
    /* width: 100% !important; */
    /* left: 0px !important; */
  }
  .ivu-poptip-popper .ivu-poptip-inner {
    border: 1px solid red !important;
  }
  .ivu-poptip-title {
    text-align: left !important;
  }
  .poptip_line .el-checkbox-group{ width: 100% !important; word-break: break-all !important; margin-bottom: 10px;}
  }
</style>

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：正在跳转

IT博客技术分享
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
java中删除数组中重复元素方法探讨
09-05
在Java编程中，处理数组或集合中的重复元素是一项常见的任务。本文将深入探讨如何在Java中有效地删除数组或集合中的重复元素，同时分析不同方法的优缺点。 首先，让我们回顾一下问题描述中给出的一种简单的解决方案...
JS数组中对象去重操作示例
10-16
在JavaScript中，处理数组中的对象去重是一项常见的任务，尤其是在处理复杂数据结构时。本文将详细介绍如何在JS数组中进行对象去重操作，并通过一个具体的示例来演示实现过程。 首先，我们来看一下提供的示例代码。...
根据ID或唯一标识删除数组中指定的obj对象数据
UserGuan的博客
12-22 1291
用于把 Array 的，然后返回剩下的元素。和 map() 类似，Array 的 filter() 也。和 map() 不同的是，filter()，然后该元素。
JS删除对象中的某一属性
有问题可关注公众号：前端研究院 后台输入问题回复
06-30 424
var obj = { name: "zhangsan", age: 19 } delete obj.name //true typeof obj // undefined 通过delete操作符，可以实现对对象属性的删除操作，返回值是布尔 可以删除其他东西吗？ 1.变量 var name = "zs" //已声明的变量 delete name // false console.log(typeof name) //string age = 19 // 未声明的变.
删除数组中指定id的元素
最新发布
SUNGUOGUO1的博客
06-13 94
【代码】删除数组中指定id的元素。
常见方法根据id删除数组中对应的项
weixin_44761131的博客
04-17 630
这种方法通过传入一个回调函数来过滤出不包含特定ID的对象，从而创建一个新的数组。方法找到具有特定ID的对象的索引，然后使用。方法和临时数组来删除特定项。方法从数组中删除该对象。
js数组按照id删除
zheshihuahua的博客
10-11 1717
1.使用filter()方法实现JavaScript数组id删除（该方法写在methods里面）},在上述代码中，我们使用了filter() 方法来对数组进行筛选，找出不等于我们要删除的的所有元素，从而实现了JSt数组id删除。需要注意的是，我们需要将结果重新赋值给原数组。
vue 向对象添加和删除属性
qq_42063793的博客
04-29 906
this.$delete(对象名,'对象属性'); this.$set(对象名,'键', 值) so easy~ 妈妈再也不用担心我的学习
JS中根据id删除一行数据
你只管努力，
11-13 1万+
function del(tableID, obj) {    var rowIndex = obj.parentElement.parentElement.rowIndex;    obj.parentElement.parentElement.parentElement.deleteRow(rowIndex);  } 从申请中剔除
js代码-根据key相同合并对象，放进新的数组中
07-14
总之，JavaScript中合并具有相同key的对象是一项常见的任务，可以使用字典和`Object.assign()`来实现。了解如何有效地处理和合并数据是提升JavaScript编程能力的重要一环，特别是在处理复杂数据结构时。
JavaScript如何把两个数组对象合并过程解析
10-16
在JavaScript中，数组对象的合并是一项常见的操作，特别是在处理数据集合时。本篇文章将深入探讨如何将两个数组对象合并，并通过实例代码详细解析其过程。 首先，我们需要理解数组对象的概念。数组对象是包含多个...
js代码-工作中用到的复杂数组去重
07-16
在JavaScript中，数组去重是一项常见的任务，尤其在处理包含复杂对象或嵌套结构的数据时。这个场景下，"js代码-工作中用到的复杂数组去重" 涉及的核心知识点包括：数组的遍历方法、比较操作、以及如何处理复杂对象的...
js怎么根据id删除数组中对象
m0_72663698的博客
05-15 777
创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。js根据id数组，删除对象数组中的指定项。
array.property.filter()方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。
lanheit的博客
08-28 349
= id)是精髓，将数组中只有和参数id不一样的item项v-for列表循环出来。在vue实例中使用es6新语法和filter()函数将除了click的id项之外的其他item项数组加载，利用v-on事件绑定指令，v-for列表渲染指令，从而实现删除的功能。filter()函数语法。...
vue中如何实现 表单校验
weixin_58089129的博客
10-26 5068
1.在data中定义rules校验规则 // 校验规则 rules: { name: [ { required: true, message: '请输入权限名称', trigger: 'blur' } ], code: [ { required: true, message: '请输入权限标识', trigger: 'blur' } ], description: [
js数组高阶函数——filter()方法
热门推荐
杜永康的博客
06-16 2万+
上面的例子中，我们筛选words数组中的每一项元素的长度大于6的元素，因为每一个元素都是个单词，是个字符串，字符串也有长度，所以这样也可以过滤出我们想要的。这个例子中，声明一个数组，并过滤，执行的逻辑是一个条件。条件为值大于等于10，也就是说，我们声明了一个数组，并且筛选了数组中每一项大于10的数字。上面这个例子，我们将数组中每一项id为1的筛选出来。后端有SQL语句可以查询，前端也可以通过这样的方式来实现查询，筛选。⭐一般来说，filter() 方法用于过滤数组中的元素，并返回一个新数组。
js filter
qq_39750019的博客
06-16 106
let arr = [{id:1,name:2},{id:2,name:3}] let id =1 var newArr = arr .filter(item => item.id === id) 注意： filter返回一个新的数组 filter() 不会对空数组进行检测 filter() 不会改变原始数组
Vue基础语法
weixin_44260420的博客
09-03 203
Vue：渐进式JavaScript框架；、 渐进式：声明式渲染-组件系统-客户端路由-集中式状态管理-项目构建； el：元素的挂载位置； data：模型数据，值为一个对象； {{}}：插值表达式； 指令：规定好的自定义属性； v-cloak：先隐藏，替换好值之后再显示最终的值；[v-cloak] {display: none;} v-text：没有闪烁问题； v-html：可以解析代码； v-pr...
根据数组中的对象的某一项取出这个对象
04-05
可以使用数组的 find 方法来取出符合条件的对象。例如，如果要根据对象的 id 取出这个对象，可以这样写： ``` const arr = [ { id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Bob' }, ]; const obj = arr.find(item => item.id === 2); console.log(obj); // { id: 2, name: 'Jane' } ``` 在这个例子中，使用了数组的 find 方法，传入一个回调函数作为参数。这个回调函数接收一个参数 item，表示数组中的每个元素。在回调函数中，判断 item 的 id 是否等于 2，如果是，则返回这个 item，否则继续遍历数组。最终，find 方法返回符合条件的对象。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT博客技术分享

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值