JavaScript Recursive Function for Generating FancyTree JSON Structure

Question

JavaScript Recursive Function for Generating FancyTree JSON Structure

I'm currently building an array of JSON objects for FancyTree (https://github.com/mar10/fancytree/wiki/TutorialLoadData). My JSON source is from the Jira REST service, and its structure can vary widely. Therefore, the code to construct the array of JSON objects needs to be adaptable and capable of handling any format.

Below is an example of the source JSON:

{
"feed": {
    "entry": [
        {
            // Json content omitted for brevity
        }
    ]
}
}

The challenge is to transform this data into a specific format as shown below:

[
{title: "Node 1", key: "1"},
{title: "Folder 2", key: "2", folder: true, children: [
  {title: "Node 2.1", key: "3", myOwnAttr: "abc"},
  {title: "Node 2.2", key: "4"},
  {title: "Folder 3", key: "5", folder: true, children: [
    {title: "Node 3.1", key: "6", myOwnAttr: "xyz"},
    {title: "Node 3.2", key: "7"}
  ]}
]}
]

While attempting to achieve this transformation, I've encountered some difficulties with the current implementation. Any assistance or suggestions on improving the logic would be greatly appreciated. Thank you!

javascript json recursion fancytree

Answer 1

Answer №1

A more concise code solution could be:

const createMenu = (obj) =>
  Object .entries (obj) .flatMap (([k, v]) =>
    Array .isArray (v)
      ? []
    : Object (v) === v
      ? [{title: k, folder: true, children: createMenu (v)}]
      : [{key: k, title: `${k}`, tooltip: v}]
  )

const convertData = (obj) =>
  obj .feed .entry .map ((o) => ({
    title: 'Item',
    folder: true, 
    children: createMenu (o)
  }))

const dataInput = {feed: {entry: ... INSERT YOUR DATA HERE ...}}

console.log(convertData(dataInput))

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

In this implementation, createMenu is responsible for the recursive actions, while convertData wraps it for root level handling.

By utilizing flatMap and transforming single returns with arrays, we can efficiently process arrays in properties without cluttering the code. This approach merges functionalities of filter and map.

Answer 2

A more concise code solution could be:

const createMenu = (obj) =>
  Object .entries (obj) .flatMap (([k, v]) =>
    Array .isArray (v)
      ? []
    : Object (v) === v
      ? [{title: k, folder: true, children: createMenu (v)}]
      : [{key: k, title: `${k}`, tooltip: v}]
  )

const convertData = (obj) =>
  obj .feed .entry .map ((o) => ({
    title: 'Item',
    folder: true, 
    children: createMenu (o)
  }))

const dataInput = {feed: {entry: ... INSERT YOUR DATA HERE ...}}

console.log(convertData(dataInput))

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

In this implementation, createMenu is responsible for the recursive actions, while convertData wraps it for root level handling.

By utilizing flatMap and transforming single returns with arrays, we can efficiently process arrays in properties without cluttering the code. This approach merges functionalities of filter and map.

JavaScript Recursive Function for Generating FancyTree JSON Structure

Answer №1

Similar questions

VueJS Array Index causing unexpected output

React's constructor being invoked twice

Loop through a collection of arrays that contain the same elements, and multiply each consecutive element by a specified value x

The Angular JavaScript page successfully compiles, yet displays only a blank screen

Accept JSON data within a node server utilizing express

Tips for showcasing the chosen option from an autocomplete input field in a React application

What is the best way to store an ES6 Map in local storage or another location for later use?

Updating the state within a component while specifically modifying the second item within a list

Upon successfully logging in via an API, I received a JSON response. Now, I want to display the length of the arrays as the count for my notification icon. Any suggestions on how I can

displaying a Google Map within a designated container

The issue of ERR_MODULE_NOT_FOUND in Node.js express.Router arises when attempting to import new routes

The functionality of the Angular directive ngIf is not meeting the desired outcome

Vue.js transition-group does not apply the *-move class

Modifying the content in one form field based on the information entered in another input field

Javascript Using Promise to Await Ajax Content Loading

The 'else' statement does not seem to function properly with the 'src' attribute

The integration of Firebase Google Auth seems to encounter issues when used on the Vercel

JsTree throws an error stating that the JSON is invalid

Issues with displaying AngularJs directive template

Exploring the process of navigating through jQuery Arrays: Utilizing JQuery Array Filter