Listing different depths object using the same element

  • 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.

  • 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){
          	label: key,
            children: convert(value)
          	label: key
       return result
      }, [])

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

  • @dmoylan yes that’s it thank you!!

Log in to reply