将树状文件目录转换为JSON对象

时间:2018-07-08 04:13:26

标签: javascript json treeview

我正在尝试将文件目录响应转换为JSON对象。 这是文件目录功能的响应副本。

[ 'C:/Users/Freddy/System/storage/Objects/Users/1',
  'C:/Users/Freddy/System/storage/Objects/Users/1/email',
  'C:/Users/Freddy/System/storage/Objects/Users/1/email/FreddyMcGee@Gmail.com',
  'C:/Users/Freddy/System/storage/Objects/Users/1/etc',
  'C:/Users/Freddy/System/storage/Objects/Users/1/etc/etc',
  'C:/Users/Freddy/System/storage/Objects/Users/1/password',
  'C:/Users/Freddy/System/storage/Objects/Users/1/password/123123123213',
  'C:/Users/Freddy/System/storage/Objects/Users/1/username',
  'C:/Users/Freddy/System/storage/Objects/Users/1/username/Freddy1337' ]

这是我正在尝试/打算实现的目标:

1 : {
    email: "FreddyMcGee@Gmail.com",
    etc: etc,
    password: "12313123",
    username: "Freddy1337"
}

目录中最短的路径就是JSON对象的开始。所有先前的“文件夹目录”都将被剪切。

我尝试编写一个函数来执行此操作,但是由于文件夹“ Users”出现两次,因此遇到了一些麻烦。此外,该功能无法正确遍历节点,它只是在设定的部分将其剪切并将其粘合在一起。这太可怕了,我有点as愧。

function TreeToJson(directory, cutAfter){
    for (var i = directory.length - 1; i >= 0; i--) {
        directory[i] = directory[i].substr(directory[i].indexOf(cutAfter) + cutAfter.length, directory[i].length - 1);
        directory[i] = directory[i].split("/");
        directory[i].shift();
    };
    jsonA = {}; jsonB = {}; jsonC = {};
    for (var i = 0; i < directory.length; i++) {
        if(directory[i][2] != undefined){
        jsonB[directory[i][2]] = directory[i][3]
        }
    };
    jsonC[Number([directory[0][1]])] = jsonB;
    jsonA[directory[0][0]] = jsonC;
    return jsonA;
}
TreeToJson(files, 'Objects');

如果有人可以向我展示将“树状视图模型”转换为“ JSON对象”的更好方法,我将不胜感激。我对其他开发人员会采用的方法以及最简单的解决方案感到好奇。

2 个答案:

答案 0 :(得分:1)

一个非常常见的操作是在最后一个斜杠之后提取字符串的一部分,因此我为此准备了一个正则表达式函数。从数组中的第一个元素中识别出起始目录名称,然后使用一个简单的for循环以2到2的方式遍历数组的其余部分,以提取键和值:

const input = [
  'C:/Users/Freddy/System/storage/Objects/Users/1',
  'C:/Users/Freddy/System/storage/Objects/Users/1/email',
  'C:/Users/Freddy/System/storage/Objects/Users/1/email/FreddyMcGee@Gmail.com',
  'C:/Users/Freddy/System/storage/Objects/Users/1/etc',
  'C:/Users/Freddy/System/storage/Objects/Users/1/etc/etc',
  'C:/Users/Freddy/System/storage/Objects/Users/1/password',
  'C:/Users/Freddy/System/storage/Objects/Users/1/password/123123123213',
  'C:/Users/Freddy/System/storage/Objects/Users/1/username',
  'C:/Users/Freddy/System/storage/Objects/Users/1/username/Freddy1337'
];
const lastPart = str => str.match(/\/([^\/]+)$/)[1];
const [baseDirectory, ...keysVals] = input;
const dirName = lastPart(baseDirectory);
const dirObj = {};
for (let i = 0; i < keysVals.length; i += 2) {
  const key = lastPart(keysVals[i]);
  const val = lastPart(keysVals[i + 1]);
  dirObj[key] = val;
}
const output = { [dirName]: dirObj };
console.log(output);

答案 1 :(得分:1)

您可以按'Users'和.reduce()拆分结果数组:

const data = ['C:/Users/Freddy/System/storage/Objects/Users/1',
  'C:/Users/Freddy/System/storage/Objects/Users/1/email',
  'C:/Users/Freddy/System/storage/Objects/Users/1/email/FreddyMcGee@Gmail.com',
  'C:/Users/Freddy/System/storage/Objects/Users/1/etc',
  'C:/Users/Freddy/System/storage/Objects/Users/1/etc/etc',
  'C:/Users/Freddy/System/storage/Objects/Users/1/password',
  'C:/Users/Freddy/System/storage/Objects/Users/1/password/123123123213',
  'C:/Users/Freddy/System/storage/Objects/Users/1/username',
  'C:/Users/Freddy/System/storage/Objects/Users/1/username/Freddy1337'
];

const objects = data
  .map(e => {
    return e.split('Users')[2];
  })
  .reduce((all, curr) => {
    let elems = curr.split('/');
    all[elems[1]] = all[elems[1]] || {};

    if ([elems[2]] && elems[3]) {
      Object.assign(all[elems[1]], {
        [elems[2]]: elems[3]
      })
    }
    
    // elems[1] is : 1
    // elems[2] is the key ( username, password .. )
    // elems[3] is the value ( Freddy1337 ... )
    
    return all;
  }, {})

console.log(objects)

编辑:与上述相同的代码封装在一个函数中:

const tree = ['C:/Users/Freddy/System/storage/Objects/Users/1',
  'C:/Users/Freddy/System/storage/Objects/Users/1/email',
  'C:/Users/Freddy/System/storage/Objects/Users/1/email/FreddyMcGee@Gmail.com',
  'C:/Users/Freddy/System/storage/Objects/Users/1/etc',
  'C:/Users/Freddy/System/storage/Objects/Users/1/etc/etc',
  'C:/Users/Freddy/System/storage/Objects/Users/1/password',
  'C:/Users/Freddy/System/storage/Objects/Users/1/password/123123123213',
  'C:/Users/Freddy/System/storage/Objects/Users/1/username',
  'C:/Users/Freddy/System/storage/Objects/Users/1/username/Freddy1337'
];

function TreeToJson(data, cutAfter){
  const objects = data
    .map(e => {
      return e.split(cutAfter)[1];
    })
    .reduce((all, curr) => {
      let elems = curr.split('/');
      all[elems[2]] = all[elems[2]] || {};

      if([elems[3]] && elems[4]){
        Object.assign(all[elems[2]], {
          [elems[3]] : elems[4]
        })
      }

      return all;
    }, {})
    
	return objects;
}

console.log(TreeToJson(tree, 'Objects'))