您的位置:首页 > Web前端 > JavaScript

json数据格式转换成树形状态两种方法

2017-10-23 12:30 696 查看
var jsonData = [
{"provname":"广东","cityname":"深圳","localname":"罗田","deptname":"保险1","struid":"C0092","manager":"小飞","telephone":"020-110"},
{"provname":"广东","cityname":"深圳","localname":"福田","deptname":"保险2","struid":"C0092","manager":"小张","telephone":"020-110"},
{"provname":"广东","cityname":"深圳","localname":"福田","deptname":"保险3","struid":"C0092","manager":"小名","telephone":"020-110"},
{"provname":"广东","cityname":"东莞","localname":"厚街","deptname":"保险4","struid":"C0092","manager":"小飞","telephone":"020-110"},
{"provname":"广东","cityname":"广州","localname":"白云","deptname":"保险5","struid":"C0092","manager":"小张","telephone":"020-110"},
{"provname":"广东","cityname":"广州","localname":"荔湾","deptname":"保险6","struid":"C0092","manager":"小张","telephone":"020-110"},
{"provname":"广东","cityname":"东莞","localname":"厚街","deptname":"保险7","struid":"C0092","manager":"小名","telephone":"020-110"},
{"provname":"广东","cityname":"惠州","localname":"厚街","deptname":"保险7","struid":"C0092","manager":"小名","telephone":"020-110"},
{"provname":"广东","cityname":"东莞","localname":"厚街","deptname":"保险7","struid":"C0092","manager":"小名","telephone":"020-110"},
{"provname":"广东","cityname":"惠州","localname":"厚街","deptname":"保险7","struid":"C0092","manager":"小名","telephone":"020-110"},
{"provname":"广东","cityname":"惠州","localname":"厚街","deptname":"保险7","struid":"C0092","manager":"小名","telephone":"020-110"}
]

1.第一种方式
/**
* 转换一维数组为树形数组
* @param {Array} keys 树形结构的参照key
* @param {Array} data 待转换的原始数据
* @return {Array} 转换后的数组
* @api private
*/
function translate (keys, data) {
let [key, ...nextKeys] = keys
let hasNextKey = nextKeys && nextKeys.length
let map = {}

data.forEach(item => {
let k = item[key]
if (k && !map[k]) {

// 获取源数组中所有命中的`item`认为这些`item`为子项
let childList = data.filter(item => item[key] === k).map(item => delete item[key] && item)
map[k] = {
[key]: k,
list: hasNextKey ? translate(nextKeys, childList) : childList // 如果还有用来分组的key,继续执行,否则返回数组
}
}
})

return Object.values(map)
}
4000

let result = translate(['provname', 'cityname', 'localname'], jsonData)

console.log(result)

2.第二种方式
var provnameArr = [];
var resultArr = [];
$(function () {
for (var i = 0, len = jsonData.length; i < len; i++) {
var currData = jsonData[i];
var provname = currData.provname || "";
//处理省级数据
var proObj = {};
var proIndex = $.inArray(provname, provnameArr);
if (proIndex == -1) {
provnameArr.push(provname);
proObj.provname = provname;
proObj.citylist = [];
resultArr.push(proObj);
} else {
proObj = resultArr[proIndex];
}
//处理市级数据
var cityname = currData.cityname || "";
var cityObj = getCityObjByCityName(cityname,proObj);
if (!cityObj) {
cityObj = {};
cityObj.cityname = cityname;
cityObj.citylists = [];
proObj.citylist.push(cityObj);
}
//处理区级数据
var localname = currData.localname || "";
var localnameObj = getLocalObjByLocalName(localname,cityObj);
if (!localnameObj) {
localnameObj = {};
localnameObj.localname = localname;
localnameObj.localnames = [];
cityObj.citylists.push(localnameObj);
}
var infoObj = {
"longitude": currData.longitude,
"latitude": currData.latitude,
"deptname": currData.deptname,
"struid":currData.struid,
"manager": currData.manager,
"telephone": currData.telephone,
"pickupaddr":currData.pickupaddr,
"pickupcall":currData.pickupcall
};
localnameObj.localnames.push(infoObj);
}
});

//根据city名找到city级数据
function getCityObjByCityName(cityName,proObj){
var citylist = proObj.citylist;
var cityObj = null;
for(var i = 0; i < citylist.length; i++){
var currData = citylist[i];
var currName = currData.cityname;
if(cityName == currName){
cityObj = currData;
break;
}
}
return cityObj;
}

//根据区名找到区级数据
function getLocalObjByLocalName(localName,cityObj){
var citylists = cityObj.citylists;
var localnameObj = null;
for(var i = 0; i < citylists.length; i++){
var currData = citylists[i];
var currName = currData.localname;
if(localName == currName){
localnameObj = currData;
break;
}
}
return localnameObj;
}
console.log(resultArr);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐