0

I want to get the output as:

options: [{
  id: 'parent1',
  label: 'parent1',
  children: [{
    id: 'child1',
    label: 'child1',
    children: [{
      id: 'lastChild1',
      label: 'lastChild1',
    }]
  }, { 
    id: 'child2',
    label: 'child2',
    children: [{
      id: 'lastChild2',
      label: 'lastChild2',
    }]
  }]
}]

However, the output from getOptions() is in the format where the children property array of parent1 object contain only the second child in the above format, first child is kind of overwritten or not visited by the for..in loop in the recurseList().

Can anyone fix the code to output the first child child1 along with child2 as well, basically any level of nesting.

var myObj = {
  parent1: {
    child1: {
      lastChild1: { test: 'cool'}
    },
    child2: {
      lastChild2: { test: 'cool'}
    }
  },
  parent2: {
    child2_1: {
      lastChild2_1: { test: 'cool'}
    },
    child2_2: {
      lastChild2_2: { test: 'cool'}
    }
  }
}

var result = getOptions(myObj)
console.log('result', result)

function getOptions(obj) {
  var options = []
  for (key in obj) {
    var data = recurseList(obj[key])
    options.push(data)
  }
  return options
}

function recurseList(obj) {
  let data= {}
  let option= []
  for (key in obj) {
    data.id = key
    data.label = key
    data.children = []

    if(obj[key] instanceof Object) {
      var val = recurseList(obj[key])
      data.children.push(val)
    }
  }
  return data
}

Actually, I want data from my firebase real-time-database as show in the image below:

firebase real-time-database snapshot

to be in the format for this vuejs plugin: https://vue-treeselect.js.org

Thanks

Improve this question
3
  • If you want to recurse to any level, how do you distinguish between, say parent2 or lastchild1 and test? Is it only because the value of the former ones are objects and the latter is a string? Or is there something else going on with property names or some such? Commented Oct 4, 2019 at 14:11
  • @ScottSauyet So actually, I do not want the object properties in the output at all, I only want the nodes as in the options data structure of this VueJS plugin vue-treeselect.js.org. Thanks Commented Oct 4, 2019 at 14:22
  • Ok, asked another way, why does {id: 'lastChild1', label: 'lastChild1'} in your sample output above not include children: {id: 'test', label: 'test'}? What distinguishes the node test from any of its ancestor nodes? Commented Oct 4, 2019 at 14:30

3 Answers 3

Reset to default
3 

const myObj = {
        parent1: {
            child1: {
                lastChild1: { test: 'cool'}
            },
            child2: {
                lastChild2: { test: 'cool'}
            }
        },
        parent2: {
            child2_1: {
                lastChild2_1: { test: 'cool'}
            },
            child2_2: {
                lastChild2_2: { test: 'cool'}
            }
        }
    }


function getOptions(obj) {
    return Object.keys(obj).reduce((acc, cur) => {
        acc.push({
          id: cur,
          label: cur,
          children: recurseList(obj[cur])
        })
        return acc;
    }, [])
}
  
function recurseList(obj) {
    return Object.keys(obj).reduce((acc, cur) => {
        if(obj[cur] instanceof Object) {
            let data = {
                id: cur,
                label:cur
            }      
            const children = recurseList(obj[cur]);
            If(children.length) {
                  data.children = children
            }
            acc.push(data)
        }
        return acc;
    }, [])
}

var result = getOptions(myObj)
console.log('result', result)

The problem is that you always use empty children array in a loop. And also you are not using your very first key parent1 to push to your result array.

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

16 Comments

Thanks for your answer but your output is not the desired output I want, Pls refer to the top of my question. The output I want is children: [{ id: 'child1', label: 'child1', children: [{ id: 'lastChild1', label: 'lastChild1', }] }, { id: 'child2', label: 'child2', children: [{ id: 'lastChild2', label: 'lastChild2', }] }]
Check now please if that is what you expect.
Hi Daniyal, sorry no but that again is incorrect. Actually I am trying to get the options array as this VueJS plugin requires for data from my firebase real-time-database source. vue-treeselect.js.org. [[Also edited my question with this additional info]]
Isn't the output the same?)
No, The output does not contain child1. Moreover it's descendant i.e. last_child1 gets clubbed with last_child1 under child2. Output should be Parent1 |_ child1 | |_last_child1 |_ child1 |_last_child1
|
2

variable depth

Here's an adaptation to Scott's (wonderful) answer that allows you to convert your nested structure to a user-controlled depth; convertUntil -

  1. If the input, o, is not an object, (base case) there is nothing to convert, return the input
  2. Otherwise, (inductive) the input is an object. If, the object passes the user-supplied test, stop nesting and return children: {}
  3. Otherwise, (inductive) the input is an object but it does not pass the user-supplied test. Map over the input object and create a level of our output structure. Recur convertUntil on each object value.

Numbered comments above correspond to the code below -

const identity = x =>
  x

const convertUntil = (test = identity, o = {}) =>
  Object (o) !== o  // 1
    ? o
: test (o)          // 2
    ? {}
: Object
    .entries (o)    // 3
    .map
      ( ([ k, v ]) =>
          ({ id: k, label: k, children: convertUntil (test, v) })
      )

const myObj =
  { parent1:
      { child1: { lastChild1: { test: 'cool' } }
      , child2: { lastChild2: { test: 'cool' } }
      }
  , parent2:
      { child2_1: { lastChild2_1: { test: 'cool' } }
      , child2_2: { lastChild2_2: { test: 'cool' } }
      }
  }

console .log (convertUntil (x => x.test === "cool", myObj))

While I prefer this more consistent data structure, I can understand if you don't like the empty children: {} created above. With a slight modification, we can remove empty children properties -

const identity = x =>
  x

const convertUntil = (test = identity, o = {}) =>
  Object (o) !== o
    ? o
: Object
    .entries (o)
    .map
      ( ([ k, v ]) =>
          test (v) // <-- test here
            ? { id: k, label: k } // <-- no children
            : { id: k, label: k, children: convertUntil (test, v) }
      )

const myObj =
  { parent1:
      { child1: { lastChild1: { test: 'cool' } }
      , child2: { lastChild2: { test: 'cool' } }
      }
  , parent2:
      { child2_1: { lastChild2_1: { test: 'cool' } }
      , child2_2: { lastChild2_2: { test: 'cool' } }
      }
  }

console .log (convertUntil (x => x.test === "cool", myObj))

But watch out for -

console .log (convertUntil (x => x.test === "cool", { test: "cool" }))
// [ { id: "test", label: "test", children: "cool" } ]

fixed depth

Another option would be to convert the nested structure to a specified depth -

const identity = x =>
  x

const convert = (o = {}, depth = 0) =>
  Object (o) !== o
    ? o
: Object
    .entries (o)
    .map
      ( ([ k, v ]) =>
          depth === 0 // <-- depth test
            ? { id: k, label: k } // <-- no children
            : { id: k, label: k, children: convert (v, depth - 1) } // <-- depth minus one
      )

const myObj =
  { parent1:
      { child1: { lastChild1: { test: 'cool' } }
      , child2: { lastChild2: { test: 'cool' } }
      }
  , parent2:
      { child2_1: { lastChild2_1: { test: 'cool' } }
      , child2_2: { lastChild2_2: { test: 'cool' } }
      }
  }

// show various depths
for (const d of [ 0, 1, 2 ])
  console .log (`depth: ${d}`, convert (myObj, d))

combined technique

Per Scott's comment, the techniques can be combined into a single solution. This allows the user to continue conversion based on the object's properties or a specified depth level -

const identity = x =>
  x

const convertUntil = (test = identity, o = {}, depth = 0) =>
  Object (o) !== o
    ? o
: Object
    .entries (o)
    .map
      ( ([ k, v ]) =>
          test (v, depth) // <-- include depth in test
            ? { id: k, label: k }
            : { id: k, label: k, children: convertUntil (test, v, depth + 1) } // <-- depth plus one
      )

const myObj =
  { parent1:
      { child1: { lastChild1: { test: 'cool' } }
      , child2: { lastChild2: { test: 'cool' } }
      }
  , parent2:
      { child2_1: { lastChild2_1: { test: 'cool' } }
      , child2_2: { lastChild2_2: { test: 'cool' } }
      }
  }

console .log (convertUntil ((_, depth) => depth === 2, myObj))

Improve this answer

3 Comments

Very nice. Obviously if my assumption about the decision is correct, then one could just pass the converse of my hasObjectProperties to this.
An interesting possibly extension would be to maintain a depth value and add that as an argument to test, allowing the user to cut off at an explicit level of nesting.
I was originally thinking of using an integer depth as well but opted for the higher-order function. Adding depth as a parameter to the user's test is a convenient enhancement. Thanks for the comment ^^
1

If you don't need to distinguish the test node from the other nodes, then I think this is straightforward:

const convert = (obj) =>
  Object .entries (obj) .map (([k, v]) => ({
    id: k, 
    label: k,
    ...(typeof v == 'object' ? {children: convert (v)} : {})
  }))

const myObj = {
  parent1: {child1: {lastChild1: { test: 'cool'}}, child2: {lastChild2: { test: 'cool'}}},
  parent2: {child2_1: {lastChild2_1: { test: 'cool'}}, child2_2: {lastChild2_2: { test: 'cool'}}}
}

console .log (
  convert (myObj)
)

I'm guessing that distinguishing that deepest node would make this significantly more complex.

Update

Ok, so it's not that much more complex, if the condition is that the object has no properties which are themselves objects. (This is still not clear, and the requested output sample and the image posted as a comment on another answer seem to disagree. But that would be my best guess.) We can do this with either an inline test:

const convert = (obj) =>
  Object .entries (obj) .map (([k, v]) => ({
    id: k, 
    label: k,
    ...((typeof v == 'object' && Object .values (v) .some (o => typeof o == 'object'))
         ? {children: convert (v)} 
         : {}
       )
  }))

or with a helper function:

const hasObjectProperties = (obj) =>
  Object .values (obj) .some (o => typeof o == 'object')

const convert = (obj) =>
  Object .entries (obj) .map (([k, v]) => ({
    id: k, 
    label: k,
    ...((typeof v == 'object' && hasObjectProperties(v))
         ? {children: convert (v)} 
         : {}
       )
  }))

Using the latter, the code becomes:

const hasObjectProperties = (obj) =>
  Object .values (obj) .some (o => typeof o == 'object')

const convert = (obj) =>
  Object .entries (obj) .map (([k, v]) => ({
    id: k, 
    label: k,
    ...((typeof v == 'object' && hasObjectProperties(v))
         ? {children: convert (v)} 
         : {}
       )
  }))

const myObj = {
  parent1: {child1: {lastChild1: { test: 'cool'}}, child2: {lastChild2: { test: 'cool'}}},
  parent2: {child2_1: {lastChild2_1: { test: 'cool'}}, child2_2: {lastChild2_2: { test: 'cool'}}}
}

console .log (
  convert (myObj)
)

Improve this answer

2 Comments

This is a very nice soln, I like it a lot. Cool & terse however the last node's properties/data shouldn't be in the output. Thanks.
Updated to fix that. It wasn't as complex as I expected. Still not sure if my assumption about when to skip a node was correct (that is if it doesn't have any child properties which are objects.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.