js数据适配--将后端数据适配成前端想要的样子

最新推荐文章于 2023-04-06 19:46:59 发布

熙熙鬼

最新推荐文章于 2023-04-06 19:46:59 发布

阅读量741

点赞数

分类专栏： js前后端数据适配文章标签：前端 javascript 后端

本文链接：https://blog.csdn.net/qq_49496611/article/details/122503399

版权

js前后端数据适配专栏收录该内容

1 篇文章 0 订阅

订阅专栏

现在有这样一个需求：

前后端人员合作开发某个项目，由于时间原因，后端人员未能及时将前台所需数据返给前端人员，因此，前端人员不得不自己写一些必要的假数据做测试，等到后端人员将所有数据全都准备好以后，前端人员发现后台返回的数据，键名与自己所写的假数据不相符合。

提问：如何使用js做到数据适配，使得前台人员不用一个一个修改已经渲染数据的代码？

接下来手把手教大家撸一撸这个代码：

一、首先创建一个名为utils.js的js文件，用于封装数据适配方法

<script>
    //做函数封装处理，防止数据被随意修改
   (function () {

    function dataAdaper(houData, changeKeyArr) {
        //创建一个新数组，用于存储修改后的数据
        let newArr = []
        //遍历后台数据
        for (let i = 0; i < houData.length; i++) {
            //对后台数据对象进行深拷贝
            let obj = {...houData[i]}
            //遍历前台自定义所需要的键
            for (const key in changKeyArr) {
                //将后台的值赋给前台自定义的值
                obj[key] = houData[i][changKeyArr[key]]
                //删除已经替换掉的数据
                delete obj[changKeyArr[key]]
            }
            //将新的数据对象放入数组中
            newArr.push(obj)
        }
        
        return newArr
    }
    
    //数据适配方法暴露出去，供用户使用
    windown.dataAdaper = dataAdaper
})()
        
</script>

二、新建一个Test.html，测试数据适配方法是否能修改成我们想要的数据样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据适配</title>
</head>

<body>
    //引入已经编写好的数据适配文件
    <script src="./utils"></script>
    //用户自定义js
    <script>
        // 自定义一个前端想要修改键名的数据对象
        let changKeyArr = {
            //对象属性为前台想要修改成的样子，属性值为后台人员写好的数据键名
            sno: 'num',
            sname: 'name',
            sage: 'age'
        }
        //模拟一个后台数据
        let houData = [{
            num: 1,
            name: '鬼谷子',
            age: 16
        }, {
            num: 2,
            name: '大乔',
            age: 21
        }, {
            num: 3,
            name: '周瑜',
            age: 20
        }, {
            num: 4,
            name: '小鲁班',
            age: 19
        }]
        
        //使用数据适配方法，变成我们想要的数据
        dataAdaper(houData,changKeyArr)
    </script>
    
</body>

</html>

希望这篇文章对各位小伙伴有帮助！