週二. 8 月 11th, 2020

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

利用 Javascript map 比對兩個 array 物件

1 min read
JavaScript Map

利用 Javascript map 比對兩個 array 物件

 

  • 很多的情況是:

從主機回傳一個 Json Object: RoleListTable,存放所有的角色資料

{"roles":[
  {"authorityId":1,"name":"ADMINS","id":1,"isSystem":true},
  {"authorityId":2,"name":"USERS","id":2,"isSystem":true}
]}

目前的帳號登入時,主機也回傳一個 Json Object: userRoles,存放此帳號所有的角色。

{"userRoles":[{"authorityId":2,"name":"USERS","id":2,"userId":2,"isSystem":true}]}

那麼利用 JavaScript 如何取得不屬於此帳號的所有其它角色資料呢? 可以使用下列 JavaScript 的 map 就可以輕鬆解決

this.currentUserRoles = this.RoleListTable.map((v,k)=>{
 let temp = this.tableUserRoles.find(role=>role.authorityId === v.authorityId)
 if (temp == undefined){
   return v;
 }
});

 

  • 實例運用

使用 vxe-table 來選篩選在角色清單中,有被選中的角色,效果如下圖

JavaScript Map

 

在前端 HTML

<el-dialog title="Roles" :visible.sync="dialogRoleFormVisible" @open="handleDialogRoleOpen" >
  <vxe-table border auto-resize stripe row-key highlight-current-row highlight-hover-row ref="xRoleListTable" height="300" :data="RoleListTable" >
 <vxe-table-column type="checkbox" width="60"></vxe-table-column>
 <vxe-table-column field="name" title='name' ></vxe-table-column>          
 <vxe-table-column field="isSystem" title='isSystem' ></vxe-table-column>
 <vxe-table-column field="description" title='description'></vxe-table-column>
  </vxe-table>
  <span slot="footer" class="dialog-footer">
 <el-button @click="dialogRoleFormVisible = false">Cancel</el-button>
 <el-button type="primary" @click="getSelectRoles()">Confirm</el-button>
  </span>
</el-dialog>

在前端 JavaScript , 在 vuejs 裡的 methods 撰寫 handleDialogRoleOpen()

handleDialogRoleOpen() {       
 this.$nextTick(() => {
   this.$refs.xRoleListTable.setAllCheckboxRow(false);
   this.currentUserRoles = this.RoleListTable.map((v,k)=>{
   let temp = this.tableUserRoles.find(role=>role.authorityId === v.authorityId)
   if (temp){
     return v;
   }
   });
   this.$refs.xRoleListTable.setCheckboxRow(this.currentUserRoles, true);     
 });
},

 

要注意的是:el-dialog 因為取不到裡面 vxe-table 的 ref  值,所以要加入 @open="handleDialogRoleOpen" 函數 method 來另外作業。

 

REF: https://stackoverflow.com/questions/53647473/javascript-map-over-two-arrays-of-objects/53647568

 

Copyright © All rights reserved. | Newsphere by AF themes.