数据处理之本地数据和后台接口数据的混入

需求：

 此图为项目中遇到的一个问题，高亮部分是我本地定位实现的。高亮部分下面的图为一个背景图，现在要实现根据后台返回的数据，实现高亮。

前提：我对背景图下面的每个小框框都做了定位，即：新建了一个数据格式，对象，然后定义了宽高，位置这些值，然后将接口数据与本地数据，进行匹配

步骤如下：

1. 前端的数据和后端的数据要满足有一个共同的值

如图，是我本地定义的数据格式，每个数据中都是对象 ，对象的键是与后端商量好的

 如图，为后端传给我的数据，上面有一个字段的值，是与我本地对象中的键匹配的。

现在对数据进行混合

            res.data.projectStatusList.map((item) => {
                if (positionMapGkj[item.projectStatusCode]) { // 查看后台返回的数据中，有没有和我们后台字段匹配到，如果有，
                    positionMapGkj[item.projectStatusCode] = { // 则给本地的这条数据中展开这条数据中的值
                        ...positionMapGkj[item.projectStatusCode], // 这是本地数据
                        ...item, // 这是后台接口数据
                        status: true, //本地数据和后台数据混合后，往这条数据中又添加的一条
                    };
                    this.positionMap = positionMapGkj;
                })

 

 注:

...  为es6中展开运算符