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

最新推荐文章于 2024-08-21 11:33:40 发布

NeveFail

最新推荐文章于 2024-08-21 11:33:40 发布

阅读量6.3k

点赞数

分类专栏： javascript 文章标签： ajax jquery js json 数据

本文链接：https://blog.csdn.net/localhost_xiao/article/details/78317539

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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)
}

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);