如何在键(如java包)的基础上将Array转换为JSON，以查看树视图

Question

我的问题是如何在包等键的基础上将Array转换为JSON。

我把这个数组作为首字母

$scope.myValues = [
{
    title:"Transportation",
    id:"1",
    moduleId:"transportation"
},
{
    title:"Bus",
    id:"1.1",
    moduleId:"transportation.bus"
},
{
    title:"Tata Motors",
    id:"1.1.1",
    moduleId:"transportation.bus.tata.motors"
},
{
    title:"Ashok Leyland",
    id:"1.1.2",
    moduleId:"transportation.bus.ashok.leyland"
},
{
    title:"Eicher Motors",
    id:"1.1.3",
    moduleId:"transportation.bus.eicher.motors"
},
{
    title:"Train",
    id:"1.2",
    moduleId:"transportation.train"
},
{
    title:"The Himalayan Queen",
    id:"1.2.1",
    moduleId:"transportation.train.himQueen"
},
{
    title:"Maharaja Deccan Odyssey",
    id:"1.2.2",
    moduleId:"transportation.train.maharaja.deccan"
},
{
    title:"Darjeeling Himalayan Railway",
    id:"1.2.3",
    moduleId:"transportation.train.darjeeling.himalayan"
}
];

我希望我的最后一个数组基于键排序，就像java中的包键一样。

$scope.myValues = [{
title:"Transportation",
moduleId:"transportation",
category:[{
    title:"Bus",
    moduleId:"transportation.bus",
    category:[{
        title:"Tata Motors",
        moduleId:"transportation.bus.tataMotors",
        },{
        title:"Ashok Leyland",
        moduleId:"transportation.bus.ashokLeyland",
        },{
        title:"Eicher Motors",
        moduleId:"transportation.bus.eicherMotors",
        }
    ]
},{
    title:"Train",
    moduleId:"transportation.train",
    category:[{
        title:"The Himalayan Queen",
        moduleId:"transportation.train.himQueen",
        },{
        title:"Maharaja Deccan Odyssey",
        moduleId:"transportation.train.maharajaDeccan",
        },{
        title:"Darjeeling Himalayan Railway",
        moduleId:"transportation.train.darjeelingHimalayan",
        }
    ]
}];

我有索引之类的钥匙。我的目标是使json格式的对象具有基于索引的层次结构。任何建议都不建议如何将这个数组转换为类似于JSON格式的数组。

Answer 1

您可以通过循环一次数据来创建此树。

• 从新格式的空数组开始
• 查看第一项
  • 将id拆分为.，并将路径元素强制转换为索引
  • 将数字路径拆分到最后一个索引，然后再分割到它的路径。

​

• 创建一个新项，暂时不使用category属性
• 使用数字路径在新格式中导航，在需要时创建category数组
• 当您到达最深/最后一层时，使用最后一个索引添加到数组中

​

const data = [{title:"Transportation",id:"1",moduleId:"transportation"},{title:"Bus",id:"1.1",moduleId:"transportation.bus"},{title:"Tata Motors",id:"1.1.1",moduleId:"transportation.bus.tata.motors"},{title:"Ashok Leyland",id:"1.1.2",moduleId:"transportation.bus.ashok.leyland"},{title:"Eicher Motors",id:"1.1.3",moduleId:"transportation.bus.eicher.motors"},{title:"Train",id:"1.2",moduleId:"transportation.train"},{title:"The Himalayan Queen",id:"1.2.1",moduleId:"transportation.train.himQueen"},{title:"Maharaja Deccan Odyssey",id:"1.2.2",moduleId:"transportation.train.maharaja.deccan"},{title:"Darjeeling Himalayan Railway",id:"1.2.3",moduleId:"transportation.train.darjeeling.himalayan"}];

const addModule = (arr, { title, moduleId, id }) => {
  const entry = { title, moduleId }; 
  const path = id.split(".").map(Number).map(n => n - 1);
  
  const targetIndex = path[path.length - 1];
  const indexes = path.slice(0, -1);
  
  const loc = indexes.reduce(
    (arr, i) => {
      const next = arr[i];
      if (!next.category) next.category = [];
      return next.category;
    },
    arr
  );
  
  loc[targetIndex] = entry;
  return arr;
}

console.log(
  data.reduce(addModule, [])
);

​