多语字段前端处理方案

最新推荐文章于 2024-02-22 10:39:55 发布

邢永超

最新推荐文章于 2024-02-22 10:39:55 发布

阅读量479

点赞数

CC 4.0 BY-SA版权

分类专栏： g

本文链接：https://blog.youkuaiyun.com/qq_25905803/article/details/81777213

g 专栏收录该内容

1 篇文章

订阅专栏

网站多语，后台返回字段包含了规定的命名规范。可以用此方法覆盖原字段的值来赋值。

场景：

后台返回data为

data = {
    "status":1,
    "data":{
        "labelGroups":[
            {
                "labelGroupName":"领域",
                "labelGroupNameExt0":"Field",
                "labelGroupNameExt1":"領域",
                "labels":[
                    {
                        "labelName":"数字化建模",
                        "labelNameExt0":"Digital Modeling",
                        "labelNameExt1":"數位化建模",
                        "labelNameExt2":null,
                        "labelNameExt3":null,
                        "labelNameExt4":null,
                        "labelNameExt5":null
                    }
                ]
            },
            {
                "labelGroupName":"类别",
                "labelGroupNameExt0":"Category",
                "labelGroupNameExt1":"類別",
                "labels":[
                    {
                        "labelName":"社交沟通",
                        "labelNameExt0":"Social Communication",
                        "labelNameExt1":"社交溝通",
                        "labelNameExt2":null,
                        "labelNameExt3":null,
                        "labelNameExt4":null,
                        "labelNameExt5":null,
                    }
                ]
            }
        ],
        "applications":[
            {
                "applicationName":"文库",
                "applicationNameExt0":"Library",
                "applicationNameExt1":"文庫",
            }
        ]
    }
}

可以看出来约定好的多语字段后边增加Ext+${index}

前端处理方案：因为共用了同一个请求的Function ,所以在请求返回值统一处理。

const _diff = (_index, _data, _Ext) => {
  const loop = (data) => {
    if (typeof data === "object" && Array.isArray(data) && data.length) {
      data.forEach(item => {
        if (typeof item === "object" && (item.length !== 0 || Object.keys(item).length)) {
          loop(item);
        }
      });
    } else if (typeof data === "object" && Object.keys(data).length) {
      // 获取 JSON VALUE  数组   [a,a1,b,c]
      const dataKeys = Object.keys(data);
      dataKeys.forEach((item, index) => {
        const curKey = item + _Ext + _index;
        if (dataKeys.includes(curKey)) {
          const currItem = data[curKey];
          if(currItem){
            data[item] = currItem;
          }
        }
        const currData = data[item];
        if (!currData) return;
        if (typeof currData === "object" && (currData.length !== 0 || Object.keys(currData).length)) {
          loop(currData);
        }
      });
    }
  }
  loop(_data);
}

_diff 方法中有三个参数。

第一个参数为我们知道当前语种对应的index，

_data 为result返回的值，

_Ext 为多语字段区分的变量。

调用方法： _diff(0, data, 'Ext');