javascript - 如何基于 java 包等键将数组转换为 JSON 以查看 TreeView

Question

我的问题是关于如何根据包等键将数组转换为 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

您可以通过遍历数据一次来创建这棵树。

• 从我们的新格式的空数组开始
• checkout 第一项
  • 用.拆分它的id并将路径元素转换为索引
  • 将数字路径拆分为最后一个索引，以及指向它的路径
• 创建一个新项目，目前没有 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, [])
);