Parse string of file path to json object

Question

I have the list of URL like below. How to convert it into complete json object?

My array of URLs.

[
"path1/subpath1/file1.doc","path1/subpath1/file2.doc","path1/subpath2/file1.doc","path1/subpath2/file2.doc","path2/subpath1/file1.doc","path2/subpath1/file2.doc","path2/subpath2/file1.doc","path2/subpath2/file2.doc","path2/subpath2/additionalpath1/file1.doc"
]

I want this as json object like:

{
   "path1":{
      "subpath1":["file1.doc","file2.doc"],
      "subpath2":["file1.doc","file2.doc"]
   },
   "path2":{
      "subpath1":["file1.doc","file2.doc"],
      "subpath2":["file1.doc","file2.doc"],
      "additionalpath1":{
          "additionalpath1":["file1.doc"]
      }
   }
}

How to do this?

I tried it with the below code snippets. But there are few folder objects are missing.

If you try this code you will find that test1 and additional objects are missing:

<html>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body>


<p id="demo"></p>

<script>
let paths = [ "admin/640954.jpg", "admin/test1/3m-nd.jpg", 
"admin/test1/Acct.png", "admin/test1/additional/111.gif", "admin/test1/additional/Aard.jpg", 
"dp/151292.jpg", "dp/151269.jpg", "dp/1515991.jpg" ];


function getMap(urls){
    var map = {};
    urls.forEach(function(url){
        var parts = url.split("/");
        makePath(map, parts);
    })
    return map;
}

function makePath(map,parts){
    var currentPath = map;
    for(var i = 0 ; i < parts.length - 1 ; i++ ){
            if(i == parts.length -2 ){
                currentPath[parts[i]]  = currentPath[parts[i]] || [];
                currentPath[parts[i]].push(parts[++i]);
            }else{
                currentPath[parts[i]] =  currentPath[parts[i]] || {};
                currentPath = currentPath[parts[i]];
            }
    }

}

document.getElementById("demo").innerHTML=JSON.stringify(getMap(paths));
</script>

</body>
</html>

You could grab everything after the last forward slash. What have you already tried? — Anthony
– Anthony, Commented Apr 7, 2018 at 5:34
Possible duplicate of How to convert an array of paths into JSON structure? — Anthony
– Anthony, Commented Apr 7, 2018 at 5:36

acdcjunior · Accepted Answer · 2018-04-07 06:51:10Z

1

You could use .split("/") and iterate over the results, creating properties in nested objects:

let paths = [
  "path1/subpath1/file111.doc",
  "path1/subpath1/file112.doc",
  "path1/subpath2/file121.doc",
  "path1/subpath2/file122.doc",
  "path2/subpath1/file211.doc",
  "path2/subpath1/file212.doc",
  "path2/subpath2/file221.doc",
  "path2/subpath2/file222.doc",
  "path2/additionalpath3/additionalpath1/file2311.doc"
];

let treePath = {};
paths.forEach(path => {
  let levels = path.split("/");
  let file = levels.pop();

  let prevLevel = treePath;
  let prevProp = levels.shift();

  levels.forEach(prop => {
    prevLevel[prevProp] = prevLevel[prevProp] || {};
    prevLevel = prevLevel[prevProp];
    prevProp = prop;
  });

  prevLevel[prevProp] = (prevLevel[prevProp] || []).concat([file]);
});

console.log(treePath);

Or:

let paths = [
  "path1/subpath1/file111.doc",
  "path1/subpath1/file112.doc",
  "path1/subpath2/file121.doc",
  "path1/subpath2/file122.doc",
  "path2/subpath1/file211.doc",
  "path2/subpath1/file212.doc",
  "path2/subpath2/file221.doc",
  "path2/subpath2/file222.doc",
  "path2/additionalpath3/additionalpath1/file2311.doc"
];

let treePath = {};
paths.forEach(path => {
  let levels = path.split("/");
  let file = levels.pop();

  levels.reduce((prev, lvl, i) => {
    return prev[lvl] = (levels.length - i - 1) ? prev[lvl] || {} : (prev[lvl] || []).concat([file]);
  }, treePath);
});

console.log(treePath);

edited Apr 7, 2018 at 6:51

answered Apr 7, 2018 at 6:34

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Shakthi Over a year ago

If I use below string, then test1 object is missing.

let paths = [ "admin/640954_15681069_2837056_82dea68d_image.jpg", "admin/test1/3m-adjustable-notebook-riser-laptop-stand-740x740.jpg", "admin/test1/Acct-Mgmt-Templates-1024x611.png", "admin/test1/additional/111.gif", "admin/test1/additional/Adminto-Admin-Dashboard.jpg", "dp/1512966420652.jpg", "dp/1512966492869.jpg", "dp/1515556524991.jpg" ];

acdcjunior Over a year ago

What is the expected result?

Shakthi Over a year ago

Dude. The expected result is, the file names should be array of string. and folder names should be object name. I'm receiving the list of string from server side. I have to change the string to folder view like tree view. all the folder names should be the parent li and the .doc, .jpg files will be the least child.

acdcjunior Over a year ago

Dude. Your specification is ambiguous. Dude. That's why I asked what's the result. Dude. That's why nobody could meet them, because they make no sense. Dude. The test1 folder has both subfolders and files. Dude. When a folder has subfolders, it is an object. Dude. When a folder has files, it is an array. Dude. If it has files and subfolders at the same time what could it be? Dude. Something can't be an object and an array at the same time. Dude.

Shakthi Over a year ago

:). How to achieve it then? I wanna show a list of folder only in a tree view. when they click on the corresponding folder, I will show the object inside.

|

Prashant Patil · Accepted Answer · 2018-04-07 05:54:42Z

I have made Half code for you. check if it is helpful for you.

You can use it and can made some changes to achieve your goal.

<!DOCTYPE html>
<html>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body>

<p>Click the button to display the array values after the split.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var str = '"path1/subpath1/file1.doc","path1/subpath1/file2.doc","path1/subpath2/file1.doc","path1/subpath2/file2.doc","path2/subpath1/file1.doc","path2/subpath1/file2.doc","path2/subpath2/file1.doc","path2/subpath2/file2.doc","path2/subpath2/additionalpath1/file1.doc"';
    var res = str.split(",");
    document.getElementById("demo").innerHTML = res[0];

    var finalresult = [];
    var innerarray = [];
    var outer = [];
    var outer1 = [];
    var inner =[];
    jQuery.each( res, function( i, val ) {
      res1 = val.split("/");
      jQuery.each( res1, function( i2, val1 ) 
      {
            if(i2 == 0 && !(outer.includes(val1)))
            {
                outer.push(val1);
            }
            else if(i2 == 1 && !(outer1.includes(val1)))
            {
                outer1.push(val1);
            }
            else if(!(inner.includes(val1)))
            {
                inner.push(val1);
            }
        console.log(outer);
      });

    });

}
</script>

</body>
</html>

Balbo Liu · Accepted Answer · 2018-04-07 06:33:27Z

0

function filePathOject (arr) {
  const ret = {};
  arr.forEach((path) => {
    const dirs = path.split('/');
    const filename = dirs.pop();

    let dirObject = ret;
    dirs.forEach((dir, i) => {
      if (i === dirs.length - 1) {
        dirObject[dir] = dirObject[dir] || [];
        dirObject[dir].push(filename);
      } else {
        dirObject[dir] = dirObject[dir] || {};
      }
      dirObject = dirObject[dir];
    });
  });

  return ret;
}

answered Apr 7, 2018 at 6:33

Balbo Liu

706 bronze badges

1 Comment

Shakthi Over a year ago

If I use below string, then test1 object is missing.

let paths = [ "admin/640954_15681069_2837056_82dea68d_image.jpg", "admin/test1/3m-adjustable-notebook-riser-laptop-stand-740x740.jpg", "admin/test1/Acct-Mgmt-Templates-1024x611.png", "admin/test1/additional/111.gif", "admin/test1/additional/Adminto-Admin-Dashboard.jpg", "dp/1512966420652.jpg", "dp/1512966492869.jpg", "dp/1515556524991.jpg" ];

khawar jamil · Accepted Answer · 2018-04-07 07:09:42Z

0

You can do something like this.

var urls = [
"path1/subpath1/file1.doc","path1/subpath1/file2.doc","path1/subpath2/file1.doc","path1/subpath2/file2.doc","path2/subpath1/file1.doc","path2/subpath1/file2.doc","path2/subpath2/file1.doc","path2/subpath2/file2.doc","path2/subpath2/additionalpath1/file1.doc"
]

function getMap(urls){
var map = {};

urls.forEach(function(url){
    var parts = url.split("/");
    makePath(map, parts);
})
return map;
}

function makePath(map,parts){
    var currentPath = map;
    for(var i = 0 ; i < parts.length - 1 ; i++ ){
            if(i == parts.length -2 ){
                currentPath[parts[i]]  = currentPath[parts[i]] || [];
                currentPath[parts[i]].push(parts[++i]);
            }else{
                currentPath[parts[i]] =  currentPath[parts[i]] || {};
                currentPath = currentPath[parts[i]];
            }
    }

}
getMap()

Left one part for you :)

answered Apr 7, 2018 at 7:09

khawar jamil

1664 bronze badges

3 Comments

Shakthi Over a year ago

If I use below string, then test1 object is missing.

let paths = [ "admin/640954_15681069_2837056_82dea68d_image.jpg", "admin/test1/3m-adjustable-notebook-riser-laptop-stand-740x740.jpg", "admin/test1/Acct-Mgmt-Templates-1024x611.png", "admin/test1/additional/111.gif", "admin/test1/additional/Adminto-Admin-Dashboard.jpg", "dp/1512966420652.jpg", "dp/1512966492869.jpg", "dp/1515556524991.jpg" ];

khawar jamil Over a year ago

I dont see that error with this code.Can you please elaborate?

Shakthi Over a year ago

I added the html in the question section. I got the result of {"admin":["640954.jpg"],"dp":["151292.jpg","151269.jpg","1515991.jpg"]} and test1 and additional objects are missing in it.

RzR · Accepted Answer · 2019-07-23 14:21:40Z

0

Maybe you'd prefer to have subdirs in arrays too


const path = '/home/user/dir/file';
var next;

path.split('/').reverse().forEach(name => {
  if (name === "") return;
  if (typeof(next) === 'undefined') {
    next = [String(name)];
  } else {
    var current = {};
    current[name] = next;
    next = [current];
  }
});
console.log(JSON.stringify(next));
// [{"home":[{"user":[{"dir":["file"]}]}]}]

Then objects can be joined

answered Jul 23, 2019 at 14:21

RzR

3,23631 silver badges26 bronze badges

Collectives™ on Stack Overflow

Parse string of file path to json object

5 Answers 5

6 Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related