Listing different depths object using the same element

aseelmqannasa

Hello,
I am trying to list objects with different depths using q-tree element, to clarify:
I am working on a dashboard, and I want to display lookups list of objects, but I do not have a specific depth for every lookup, like the following:
I may have the following object in the list:

{ "country": { "SA": { "city": { "Ruh": { "locale": { "ar": "Riyadh", "en": "Riyadh" } } }, "locale": { "ar": "Saudi Arabia", "en": "Saudi Arabia" } } } }

and may also have the following one:

{"currency": {"JOR": {"locale": {"ar": "Dinar", "en": "JOD"}}}}

and I want to list both of them using the same element, I am sorry if that isn’t clear enough, please ask me anything to clarify more.

dmoylan

If I understand your problem, I believe you want to use a recursive function here. Iterate over an object, and for each property, if it’s a string, return it, otherwise call the function again.

Here’s a function using lodash to generate a node list:

const convert = function(object){
 return _.transform(object, function(result, value, key){
    if(_.isObject(value)){
    	result.push({
      	label: key,
        children: convert(value)
      })
    }else{
    	result.push({
      	label: key
      })
    }
   return result
  }, [])
}

Here’s a JSFiddle example with a working q-tree.

aseelmqannasa

@dmoylan yes that’s it thank you!!