Build file tree array with PHP and render in VueJS [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 6 years ago.

Improve this question

I am trying to build a file tree array with PHP based on the data blueprint from var treeData from Tree View - Vue.js (visible in javascript tab).

var treeData = [
  {
    name: 'My Tree',
    children: [
        { name: 'hello' },
        { name: 'wat' },
        {
            name: 'child folder',
            children: [
                {
                    name: 'child folder',
                    children: [
                        { name: 'hello' },
                        { name: 'wat' }
                    ]
                },
                { name: 'hello' },
                { name: 'wat' },
                {
                    name: 'child folder',
                    children: [
                        { name: 'hello' },
                        { name: 'wat' }
                    ]
                }
            ]
        }
    ]
  },
  {name: 'My tree 2'}
]

I was able to build a tree array with the following answer: PHP - create dynamic multidimensional file tree array.

But the format seen in the Vue.js docs is more suitable for that case. I did not find a way to build the array without defining the directories as keys.

$fileTree = dir_tree('/xy');
return $fileTree;

function dir_tree($dir) {    
  $files = array_map('basename', glob("$dir/*"));
  foreach($files as $file) {
    if(is_dir("$dir/$file")) {
        $return[$file] = dir_tree("$dir/$file");
    } else {
        $return[] = [
            'name' => $file,
            'type' => explode('.', $file)[1]
        ];
    }
  }
  return $return;
}

Which currently results to the following array:

{
  "folder1": {
    "0": {
        "name": "test1.txt",
        "type": "txt"
    },
    "child folder1": [
        {
            "name": "sample.png",
            "type": "png"
        }
    ]
  },
  "folder2": [
    {
        "name": "test2.txt",
        "type": "txt"
    }
  ]
}

Is there a way to manage that?

@04FS It is linked at the beginning of the question under the descirption "Tree View". I also added the array which I am referring to. — Mango D
– Mango D, Commented Mar 13, 2019 at 9:37
Maybe you should have a look at php.net/manual/de/class.recursivedirectoryiterator.php — Sindhara
– Sindhara, Commented Mar 13, 2019 at 9:37

Aakash More · Accepted Answer · 2019-03-13 09:57:38Z

2

Using the same code you mentioned in the question. And changing to the required structure.

Note using json_encode on both results will give the same output.

function dir_tree_array($dir) {
    $files = array_map('basename', glob("$dir/*"));
    $return = [];
    foreach($files as $file) {
        if(is_dir("$dir/$file")) {
            $return[] = [ "name"  =>  $file, "children" => dir_tree("$dir/$file")];
        } else {
            $return[] = ["name" => $file];
        }
    }
    return $return;
}

function dir_tree_object($dir) {
        $files = array_map('basename', glob("$dir/*"));
        $return = [];
        foreach($files as $file) {
            if(is_dir("$dir/$file")) {
                $obj = new stdClass();
                $obj->name = $file;
                $obj->children = dir_tree("$dir/$file");
                $return[] = $obj;
            } else {
                $obj = new stdClass();
                $obj->name = $file;
                $return[] = $obj;
            }
        }
        return $return;
    }

edited Mar 13, 2019 at 9:57

answered Mar 13, 2019 at 9:43

Aakash More

1681 silver badge6 bronze badges

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

1 Comment

Aakash More Over a year ago

Using this output with json_encode will give OP the desired result. Or if OP wants proper PHP objects, it can be manipulated accordingly.

Collectives™ on Stack Overflow

Build file tree array with PHP and render in VueJS [closed]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related