Empty children

[webalizer-gt]

Hi!
Is it somehow possible to change the way how treeselect manages an empty children object?
I don´t need an expand arrow or "no children" text if it´s empty.

Thank you

[WiFiUncle]

if (!newNode.children.length) delete newNode.children;

[webalizer-gt]

Thank you for answering.

Unfortunately i have no idea where to put this code.

[WiFiUncle]

show that?

if this node have no chilren you can delete node's children when u format selectTree Data.
show following.

[webalizer-gt]

Ok. I should have given more precise information about the tree data. I get it from an api as json. The structure can be nested at several levels. Unfortunately it has the children item even if it´s empty.

But you pointed me in the right direction and now i check the entire json object recursively for empty children objects:

var isObject = (arg) => typeof arg === 'object';

/**
 * 
 * @param {Object} o :: the object being cleaned
 * @param {String|Number} key :: the key or index to be cleaned from `o`
 */
function removeKey(o, key) {
  isObject(o) && Object.keys(o).forEach(function (k) {
    (k === key && o[k] && o[k].length === 0) && delete o[k] ||
      (o[k] && isObject(o[k]) && removeKey(o[k], key))
  });
  return o;
}

Thank you!

[WiFiUncle]

Have you solved the problem？
I also get data from an api as json.

let list = [{
        "id": "8a80169a6565be8d016565d89ce70000",
        "groupName": "Lev1",
        "parentId": "-1"
    },{
        "id": "ff808081658e8a1f01658f192ec00001",
        "groupName": "Lev2",
        "parentId": "8a80169a6565be8d016565d89ce70000"
    },{
        "id": "8a80169a6536485e0165364e299b0002",
        "groupName": "Lev3",
        "parentId": "ff808081658e8a1f01658f192ec00001",
    }];
function getJsonTree(data,parentId){
  let _this = this;
  let itemArr = [];
  for(let i = 0; i < data.length; i++ ){
    let node = data[i];
    if(node.parentId == parentId ){
      let newNode = {
        id: node.id,
        label: node.groupName,
        children: _this.getJsonTree(data,node.id)};
       // you can delete its children when its length equal to zero.
        if (!newNode.children.length) delete newNode.children;    
       itemArr.push(newNode);
    }
  }
  return itemArr;
}
let rootId = -1;        
getJsonTree(list, rootId);

Hope it can help u.

[webalizer-gt]

Yes i solved the problem by deleting every empty children item with the function i posted earlier.
I call it from the axios request:

axios.get('http://mr-api.local/api/categories').then((response) => {
        removeKey(response, 'children')
        commit('setCategories', { categories: response.data })
      }, (err) => {
        console.log(err)
      })

Thank´s again!

But i really think this should be an option in treeselect how to handle empty children.

[WiFiUncle]

I think so.
I had try 'noChildrenText' this option, and set it for null, but the tree also showed icon.

[simkuns]

it would be nice to have a possibility to have branch nodes converted into leaf nodes if their children array is empty

[nekooee]

I have this problem as well. please add an option that does not consider empty child arrays.

[loeffel-io]

any updates?

[DjKhireddine]

Hello,

You can resolve this problem with normalizer.
here is an axample:

normalizer(node) { return { children: node.children && node.children.length ? node.children : 0 } }

Hope can this help you

[webalizer-gt]

@DjKhireddine

Excellent! Thank you very much!

[Systemcheck]

Hello,

You can resolve this problem with normalizer.
here is an axample:

normalizer(node) { return { children: node.children && node.children.length ? node.children : 0 } }

Hope can this help you

Where to place this? Thx

[webalizer-gt]

1. Call normalizer from your treeselect:

<treeselect
    ....
       :normalizer="your_normalizer"
    ....>
</treeselect>

2. Add normalizer in data-block like so:

your_normalizer (node) {
    return {
        children: node.children && node.children.length ? node.children : 0
        }
    }