接口数据转换小练习

作为前端程序员,总是不可避免的要把接口数据转换成各种需要的数据类型.

遇到这种情况不要慌,要习惯封装函数来做到批量的转换数据.

 

几个小案例练习了一下:

案例1:

接口拿到的数据:   [{label:'男'，value: 1}, {label:'女'，value: 0}]  

目标数据:   {'1': '男'， '0': '女'}

    const arr = [{ label: '男', value: 1 }, { label: '女', value: 0 }]
    function f (arr) {
      // 写代码，得到
      const obj = {}
      arr.forEach(element => {
        obj[element.value] = element.label
      });
      return obj
    }
    const obj = f(arr);
    console.log(obj)
 // obj = {'1': '男'， '0': '女'}
  </script>

案例2:

接口拿到的数据:   [{label:'男',value: 1}, {label:'女',value: 0}]  

目标数据:   ['男', '女']

    const arr = [{label:'男',value: 1}, {label:'女',value: 0}]
 
 function f(arr) {
   // 写代码，得到
  const res = arr.map(item => {
    return item.label
   })
   return res
 }
 var arr2 = f(arr);
 console.log(arr2)
 // arr2 = ['男', '女']
  </script>

案例3:

接口拿到的数据:  

  {id:"01", name: "张大大", pid:"", job: "项目经理"},
  {id:"02", name: "小亮", pid:"01", job: "产品leader"},
  {id:"03", name: "小美", pid:"01", job: "UIleader"},
  {id:"04", name: "老马", pid:"01", job: "技术leader"},
  {id:"05", name: "老王", pid:"01", job: "测试leader"},
  {id:"06", name: "老李", pid:"01", job: "运维leader"},
  {id:"07", name: "小丽", pid:"02", job: "产品经理"},
  {id:"08", name: "大光", pid:"02", job: "产品经理"},
  {id:"09", name: "小高", pid:"03", job: "UI设计师"},
  {id:"10", name: "小刘", pid:"04", job: "前端工程师"},
  {id:"11", name: "小华", pid:"04", job: "后端工程师"},
  {id:"12", name: "小李", pid:"04", job: "后端工程师"},
  {id:"13", name: "小赵", pid:"05", job: "测试工程师"},
  {id:"14", name: "小强", pid:"05", job: "测试工程师"},
  {id:"15", name: "小涛", pid:"06", job: "运维工程师"}
]

 

目标数据:  

1.找出与某同事(小刘)同一领导的平级同事

  2.找出某同事(小亮)的所有下属

const data = [
  {id:"01", name: "张大大", pid:"", job: "项目经理"},
  {id:"02", name: "小亮", pid:"01", job: "产品leader"},
  {id:"03", name: "小美", pid:"01", job: "UIleader"},
  {id:"04", name: "老马", pid:"01", job: "技术leader"},
  {id:"05", name: "老王", pid:"01", job: "测试leader"},
  {id:"06", name: "老李", pid:"01", job: "运维leader"},
  {id:"07", name: "小丽", pid:"02", job: "产品经理"},
  {id:"08", name: "大光", pid:"02", job: "产品经理"},
  {id:"09", name: "小高", pid:"03", job: "UI设计师"},
  {id:"10", name: "小刘", pid:"04", job: "前端工程师"},
  {id:"11", name: "小华", pid:"04", job: "后端工程师"},
  {id:"12", name: "小李", pid:"04", job: "后端工程师"},
  {id:"13", name: "小赵", pid:"05", job: "测试工程师"},
  {id:"14", name: "小强", pid:"05", job: "测试工程师"},
  {id:"15", name: "小涛", pid:"06", job: "运维工程师"}
]

// 问题1. 找出 与 小刘 处于统一领导下的同事 
function f(data, name){
  // 完成代码
  // 1.找小刘
  const liu = data.filter(item => {
    return item.name === name
  })
  console.log(liu);
  // 2.找小刘的领导
  const leader = data.filter(item => {
    return item.id === liu[0].pid
  })
  console.log(leader);
  // 3.找小刘的领导的所有下属
  const colleague = data.filter(item => {
    return item.pid === leader[0].id
  })
  console.log(colleague);
  return colleague
}
const arr1 = f(data, '小刘')
console.log(arr1) // 
//  [{id:"10", name: "小刘", pid:"04", job: "前端工程师"},
//  {id:"11", name: "小华", pid:"04", job: "后端工程师"},
//  {id:"12", name: "小李", pid:"04", job: "后端工程师"}]


// 问题2. 找出 小亮 的所有下属 
function f2(data, name){
  // 完成代码
  // 1.找到小亮
  const liang = data.filter(item => {
    return item.name === name
  })
  console.log(liang);
  // 2.找到小亮的所有下属
  const underlings = data.filter(item => {
    return item.pid === liang[0].id
  })
  console.log(underlings);
  return underlings
  
}
const arr2 = f2(data, '小亮')
console.log(arr2) // 
// [{id:"07", name: "小丽", pid:"02", job: "产品经理"},
// {id:"08", name: "大光", pid:"02", job: "产品经理"}]
  </script>

案例4:

接口拿到的数据:   {label:'男',value: 1,age: 18}  

目标数据:   ['男', '1', '18']

  const obj = {label:'男',value: 1,age: 18}
 
 function f(obj) {
   // 写代码，得到
  const res = Object.values(obj)
  console.log(res);
  return res
 }
 const arr = f(obj);
 console.log(arr)
 // arr = ['男', '1', '18'] // 所有的属性值取出来，保存在数组中
</script>

案例5:

接口拿到的数据:

const arr = [
  {name: '张三', age: 18, address: '湖北'}, 
  {name: '李四', age: 18, address: '安徽'}, 
  {name: '王五', age: 18, address: '北京'}
]
const map = { name: '姓名', age: '年龄', address: '地址'}

目标数据:

 {'姓名': '张三', '年龄': 18, '地址': '湖北'}, 
 {'姓名': '李四', '年龄': 18, '地址': '安徽'}, 
 {'姓名': '王五', '年龄': 18, '地址': '北京'}
]

实现方式

function change(arr, map) {
 const mapKeys = Object.keys(map)
//  遍历对象属性
const res = mapKeys.reduce((sum,item) => {
// 数组转成字符串,再进行字符串替换,再转回去
  return JSON.parse(JSON.stringify(sum).replaceAll(item,map[item]))
},arr)
return res
}

const arr2 = change(arr, map)