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){
        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.



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


Log in to reply