做省市区联动时,用node.js将数据调整到合适结构的两种常用方法

本文介绍了在实现省市区联动功能时,如何使用Node.js将原始数据转换为适合的结构。核心思路是遍历数据,通过数组或对象的方式重新组织。文中提供两个示例,分别展示了使用数组和对象的方法,并给出了适用于Ant Design Cascader组件的结构。同时提到了一个React案例和微信小程序案例,展示实际应用。
摘要由CSDN通过智能技术生成

更新注:项目中代码已重构,更清晰规范,如有帮助请 star。


起因

省市区联动,或者城市名称匹配,是很常用的功能。在实现他们的时候,经常会出现这样的情况:拿到的行政区划数据 和 渲染所需要的结构 不相符。通常我会用JS把它们处理成合适的结构。

核心思路

遍历其子元素或属性,在遍历的回调函数中,通过临时对象,将数据重新组织成需要的结构,再将其push进一个新构建的数组中。遍历完成后,该数组就是想要的最后结果。

两种套路:数组 VS 对象。

对于数组和对象,有不同的遍历方式。

  • 对于数组,视情况可用map(), forEach()filter()等方法;

  • 对于对象,可以结合使用for inObject.keys() 来遍历其属性。

注:Object.keys()可以返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。

例子

1 数组:

test.js

const fs = require('fs')

//现有如下数组
const province = [{"code":"110000","name":"北京市"},{"code":"120000","name":"天津市"},{"code":"130000","name":"河北省"},{"code":"140000","name":"山西省"},{"code":"150000","name":"内蒙古自治区"},{"code":"210000","name":"辽宁省"},{"code":"220000","name":"吉林省"},{"code":"230000","name":"黑龙江省"},{"code":"310000","name":"上海市"},{"code":"320000","name":"江苏省"},
... ...
]

//用于放结果的空数组
let finalProvince = []

//要把数组改成这种格式
// let options = [{
//   value: '123435',
//   label: 'Zhejiang',
//   isLeaf: false,
// }, {
//   value: 'jiangsu',
//   label: 'Jiangsu',
//   isLeaf: false,
// }];

province.map(
  item => {
    let tempObj = {}
    tempObj.label = item.name
    tempObj.value = item.code
    tempObj.isLeaf = false
    finalProvince.push(tempObj)
  }
);

console.log(finalProvince);

fs.writeFile('temp.js', JSON.stringify(finalProvince), (err) => {
  if (err) throw err;
  console.log('The file has been saved!');
})

运行

node test.js

temp.js 中得到所需的json格式的文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值