【前端】使用JS对后端返回的集合对象进行遍历判断并存储到一个新的集合中

 需求

        我们需要将后端返回的List<Object>集合对象进行判断,判断对象中的isCorrect字段,然后如果是true,则判定这个对象是正确的,添加到正确的集合当中,反之添加到失败的集合当中。

后端返回的数据

data

后端返回的数据将赋值给这个集合对象

 dataListSucErrDataDictionary: [],
 dataListSucErrError: [],

JavaScript

handleFileSuccessDataDictionary(response, file, fileList) {
      this.successTotal = response.Result.successCount;
      this.errorTotal = response.Result.failCount;
      this.dataListSucErrDataDictionary = response.Result.results;
}
dataSuccessDataDictionary() {
      this.openSuccessError = true;
      this.isFlag = true;
      //错误提示那一栏不显示
      this.errorNoticeColumn = false;
      //将原本的集合进行清空
      this.dataListSucErrSuccess = [];


      //对后端返回的集合进行判断某个字段如果为false存放在另一个集合里面
      this.dataListSucErrDataDictionary.map(item => {
        //是否可导入true false
        if (item.isCorrect) {
          this.dataListSucErrSuccess.push(item);
        }
      })


      this.dataListSucErr = [];
      this.dataListSucErr = this.dataListSucErrSuccess;
    },

实现效果

 文章只写了部分的代码,主要遍历集合对象和添加到新的集合代码部分已呈现。

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
后端传递一个集合,可以使用后端框架提供的数据结构(例如List、Set等)将集合传递给前端前端可以使用JavaScript的forEach方法或者for循环遍历集合,获取需要删除的参数。当用户点击删除按钮时,可以将需要删除的参数通过Ajax发送到后端进行删除操作。删除成功后,后端可以返回操作结果,前端可以根据返回结果进行相应的处理。 以下是一个简单的示例代码: 后端Java代码: ``` @RequestMapping("/delete") @ResponseBody public Map<String, Object> delete(@RequestParam("ids") Set<Integer> ids) { // 执行删除操作 boolean success = productService.delete(ids); // 返回操作结果 Map<String, Object> result = new HashMap<>(); result.put("success", success); return result; } ``` 前端HTML代码: ``` <ul id="list"> <li data-id="1">Item 1</li> <li data-id="2">Item 2</li> <li data-id="3">Item 3</li> </ul> <button id="delete-btn">Delete Selected Items</button> ``` 前端JavaScript代码: ``` // 获取需要删除的参数 function getSelectedIds() { const selectedItems = document.querySelectorAll('#list li.selected'); const ids = []; selectedItems.forEach(item => ids.push(item.dataset.id)); return ids; } // 删除操作 function deleteItems() { const ids = getSelectedIds(); $.ajax({ url: '/delete', type: 'POST', data: { ids }, success: function(result) { if (result.success) { // 删除成功,刷页面或者从列表删除已删除的项 } else { // 删除失败,提示用户 } } }); } // 绑定事件 const deleteBtn = document.getElementById('delete-btn'); deleteBtn.addEventListener('click', deleteItems); const listItems = document.querySelectorAll('#list li'); listItems.forEach(item => { item.addEventListener('click', function() { this.classList.toggle('selected'); }); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Mxin5

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

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

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

打赏作者

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

抵扣说明:

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

余额充值