数组对象更换对象属性名且保持属性值的对应

最新推荐文章于 2023-02-13 10:00:04 发布

cksdyp

最新推荐文章于 2023-02-13 10:00:04 发布

阅读量402

点赞数

分类专栏：笔记文章标签： vue.js javascript json

本文链接：https://blog.csdn.net/weixin_50158618/article/details/125040507

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题背景

后端返回的数据里面，数组对象里面的属性名是用下划线_进行连接的，在某种情况下，需要把这个对象里面的属性名全都更换为驼峰的形式，这种情况应该不太常见，不过也算是拓宽一下思路。

数据格式的变换

// 原数据格式
{
    association_type: "特定工具及原材料获取意图"
    card_id: "610120199007289930"
    clue_id: 1
    clue_name: "建设一路"
    clue_number: "xz0001"
    contact_information: "186123123"
    cue_status: 1
    describes: "在建设一路"
    entry_person: "1"
    entry_time: "2022-01-22 20:37:13"
    feedback_status: 1
    forwarded_user_id: 18
    frequency: 2
    occurrence_place: "建设号"
    provider: "赵12"
    provider_contact_information: "18111111"
    rowId: 1
    suspect_object: "欣欣小区"
    typle: "疑似"
}

// 需要的数据格式
{
    associationType: "特定工具及原材料获取意图"
    cardId: "610120199007289930"
    clueId: 1
    clueName: "建设一路"
    clueNumber: "xz0001"
    contactInformation: "186123123"
    cueStatus: 1
    describes: "在建设一路"
    entryPerson: "1"
    entryTime: "2022-01-22 20:37:13"
    feedbackStatus: 1
    forwardedUserId: 18
    frequency: 2
    occurrencePlace: "建设一"
    provider: "赵12"
    providerContactInformation: "18111111"
    rowId: 1
    suspectObject: "欣欣小区"
    typle: "疑似"
}

解决方案

利用 Object.keys() 来循环获取对象的key，然后设置一个空对象，把处理完的key以及key对应的值绑定到新对象里面，替换原数组里面的对象。

// 以element table 勾选方法为例  其中 multipleSelection 是我们需要的转换后的数组对象数据
handleTableSelect(val) {
            let changeList = [];
            this.multipleSelection = [];
            changeList = JSON.parse(JSON.stringify(val));

            changeList.forEach(item => {
                let obj = {};
                Object.keys(item).map((key, i) => {
                    let newKey;
                    newKey = StringTools.toHump(key);
                    obj[newKey] = item[key];
                });
                this.multipleSelection.push(obj);
            });
        }

// StringTools.js

class StringTools {
    /**
     * 下划线转驼峰
     * @example StringTools.toHump('hello_js_go') //helloJsGo
     * @param name
     * @return {*}
     */
    static toHump(name) {
        return name.replace(/_(\w)/g, function(all, letter) {
            return letter.toUpperCase();
        });
    }
}

export default StringTools;

以上就能得到我想要的效果，可能代码层面不是很高端，不过是以这种思路为准，能够实现我的目标，尚可，以此为记录一下。