Comprehensive route from a one-dimensional array

Question

Comprehensive route from a one-dimensional array

I have a specific array structure that looks like this :

var items = [
[1, 0, 'Apple'],
[2, 1, 'Banana'],
[3, 0, 'Orange'],
[4, 3, 'Grape'],
[5, 0, 'Cherry'],
[6, 0, 'Mango'],
[7, 6, 'Pear'],
[8, 6, 'Coconut'],
[9, 8, 'Pineapple'],
[10, 9, 'Watermelon']];

The desired output format should be as follows:

\Apple
\Apple\Banana
\Orange
\Orange\Grape etc...

I'm attempting to modify the functionality of a PHP function like so:

function display_items($parent, $level, $array) {
    $display = "";
    foreach ($array as $item) {
        if ($parent === $item['parentid']) {
       for ($i = 0; $i < $level; $i++) {
            $display .= "-";
       }
       $display .= " " . $item['name'] . "<br />";
       $display .= display_items($item['id'], ($item + 1), $array);
    }
}
return $display;

}

The goal is to replace the "-" with the full path of the items.

javascript arrays path tree

Answer 1

Answer №1

To create a structured object containing identifiers and their related children, you can establish paths for these relations.

function generatePaths(relations) {
    const
        iterate = path => ([id, value]) => {
            var p = path.concat(value);            
            result.push(p.join('\\'));
            (relations[id] || []).forEach(iterate(p));
        },
        result = [];
    relations[0].forEach(iterate(['']));
    return result;
}

var folders = [[1, 0, 'SAV'], [2, 1, 'OLD'], [3, 0, 'Working doc'], [4, 3, 'User'], [5, 0, 'Documentation'], [6, 0, 'Specification'], [7, 6, 'Components'], [8, 6, 'test'], [9, 8, 'subtest'], [10, 9, 'subsubtest']],
    relations = folders.reduce((r, [id, parent, value]) => {
        r[parent] = r[parent] || [];
        r[parent].push([id, value]);
        return r;
    }, Object.create(null));

console.log(generatePaths(relations));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

To create a structured object containing identifiers and their related children, you can establish paths for these relations.

function generatePaths(relations) {
    const
        iterate = path => ([id, value]) => {
            var p = path.concat(value);            
            result.push(p.join('\\'));
            (relations[id] || []).forEach(iterate(p));
        },
        result = [];
    relations[0].forEach(iterate(['']));
    return result;
}

var folders = [[1, 0, 'SAV'], [2, 1, 'OLD'], [3, 0, 'Working doc'], [4, 3, 'User'], [5, 0, 'Documentation'], [6, 0, 'Specification'], [7, 6, 'Components'], [8, 6, 'test'], [9, 8, 'subtest'], [10, 9, 'subsubtest']],
    relations = folders.reduce((r, [id, parent, value]) => {
        r[parent] = r[parent] || [];
        r[parent].push([id, value]);
        return r;
    }, Object.create(null));

console.log(generatePaths(relations));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

To solve this problem, we can utilize the .map(), .find(), and .replace() functions in JavaScript. The code snippet below demonstrates how this can be achieved...

var folders = [
  [1, 0, 'SAV'],
  [2, 1, 'OLD'],
  [3, 0, 'Working doc'],
  [4, 3, 'User'],
  [5, 0, 'Documentation'],
  [6, 0, 'Specification'],
  [7, 6, 'Components'],
  [8, 6, 'test'],
  [9, 8, 'subtest'],
  [10, 9, 'subsubtest']
];

function sortFolders(arr) {
  return arr.map(folderArr => {
    let parentFolder = arr.find(el => el[0] === folderArr[1])
    let string = (parentFolder) ?
      `/${parentFolder[2]}/${folderArr[2]}` :
      `/${folderArr[2]}`
    return string.replace(/\\/g, '\\');
  })
}

sortFolders(folders); // The resulting array contains the desired folder structure...
// [
//  '/SAV',
//  '/SAV/OLD',
//  '/Working doc',
//  '/Working doc/User',
//  '/Documentation',
//  '/Specification',
//  '/Specification/Components',
//  '/Specification/test',
//  '/test/subtest',
//  '/subtest/subsubtest'
// ]

Answer 4

To solve this problem, we can utilize the .map(), .find(), and .replace() functions in JavaScript. The code snippet below demonstrates how this can be achieved...

var folders = [
  [1, 0, 'SAV'],
  [2, 1, 'OLD'],
  [3, 0, 'Working doc'],
  [4, 3, 'User'],
  [5, 0, 'Documentation'],
  [6, 0, 'Specification'],
  [7, 6, 'Components'],
  [8, 6, 'test'],
  [9, 8, 'subtest'],
  [10, 9, 'subsubtest']
];

function sortFolders(arr) {
  return arr.map(folderArr => {
    let parentFolder = arr.find(el => el[0] === folderArr[1])
    let string = (parentFolder) ?
      `/${parentFolder[2]}/${folderArr[2]}` :
      `/${folderArr[2]}`
    return string.replace(/\\/g, '\\');
  })
}

sortFolders(folders); // The resulting array contains the desired folder structure...
// [
//  '/SAV',
//  '/SAV/OLD',
//  '/Working doc',
//  '/Working doc/User',
//  '/Documentation',
//  '/Specification',
//  '/Specification/Components',
//  '/Specification/test',
//  '/test/subtest',
//  '/subtest/subsubtest'
// ]

Comprehensive route from a one-dimensional array

Answer №1

Answer №2

Similar questions

Tips for maintaining authentication in a Next.js application with Firebase even when tokens expire or the page is refreshed

Upon reloading, Nextjs static build automatically redirects users to the homepage

What is the best method for styling arrays displayed by React in version 15 using CSS?

Employing jQuery, how can one assign attributes to appended HTML and store them

"An error occurred: Uncaught SyntaxError - The import statement can only be used within a module. Including a TypeScript file into a

What is the best way to save a series of values into separate arrays and then combine them together in VBA?

Automatically updating a database value in CodeIgniter after a countdown has expired

Pressing the submit button will not successfully forward the form

Making an Angular 6 HTTP GET call using HTTP-Basic authentication

Removing an element in Vue.js

Can you identify any issues with this Javascript code's "If" condition?

Can an onload function be triggered within the location.href command?

Troubleshooting: jQuery.load function not functioning properly within ASP.NET MVC

In the context of NextJs, the req.body is treated as an object within the middleware, but transforms

Tips for sending a PHP JSON array to a JavaScript function using the onclick event

Creating an HTML table with collapsed borders and hidden rows/columns using the `border-collapse

Generating a new date instance using a specified date string and locale settings

Transferring information between a pair of input fields using ngModel

Applying a value to all JSON objects within an array using AngularJS and JavaScript

Randomly undefined custom jQuery function