修改后端返回的json树形数据的字段名

最新推荐文章于 2023-12-21 17:37:54 发布

原创最新推荐文章于 2023-12-21 17:37:54 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #json

当后端返回的数据字段名不符合需求时，可以利用JSON.parse和JSON.stringify结合正则表达式来实现字段名的替换。例如将所有'title'字段改为'name'，通过字符串操作高效完成数据结构的调整。

有时候后端返回的数据字段名不是我们想要的，这时就可以通过JSON.parse和JSON.stringify进行修改

1.后端返回的数据

 data: [
        {
          title: "江西",
          id: 1,
          children: [
            {
              title: "南昌",
              id: 1000,
              children: [
                {
                  title: "青山湖区",
                  id: 10001
                },
                {
                  title: "高新区",
                  id: 10002
                }
              ]
            },
            {
              title: "九江",
              id: 1001
            },
            {
              title: "赣州",
              id: 1002
            }
          ]
        }
]

2.把title这个字段名改为name

this.data = JSON.parse(JSON.stringify(this.data).replace(/"title"/g,'"name"'))

3.这样我们就能得到我们想要的字段名了

data: [
        {
          name: "江西",
          id: 1,
          children: [
            {
              name: "南昌",
              id: 1000,
              children: [
                {
                  name: "青山湖区",
                  id: 10001
                },
                {
                  name: "高新区",
                  id: 10002
                }
              ]
            },
            {
              name: "九江",
              id: 1001
            },
            {
              name: "赣州",
              id: 1002
            }
          ]
        }
]