Pnpjs: Taxonomy termset iteration

[veeramanx]

Hi,

I am having an issue when trying to iterate termset. we have the following term-set hierarchy .

I am able to get all terms but I am not sure now to get hierarchy of term sets to display in tree-view format. can anyone help me with this please?

Thanks.

[patrick-rodgers]

Can you share the code you've got currently or provide details on where you are stuck? Your question is a little too broad to answer currently. Thanks!

[veeramanx]

here is my code. i just wanted to know if we have any options to get childern with SP/Taxonomy.

Also, when i tried await setWithData.terms.select('Id', 'Name', 'IsDeprecated', 'Parent').get(); this line , it gets all the available terms inside the termset. we have over 1000 terms in term sets which make the performance slower.

also, please let me know how to split out terms group and terms (please see the below screenshot for the reference)

public async GetTerms(): Promise<any> {

        const store: ITermStore = await taxonomy.termStores.getByName("Taxonomy_storeID");
        const setWithData = await store.getTermSetById(this.props.TermSetId);

        const terms = await setWithData.terms.select('Id', 'Name', 'IsDeprecated', 'Parent').get();

        let taxonomyTerms: ITaxonomyTerm[] = new Array();
        let termslevel2: ITaxonomyTermLevel2[] = new Array();

        try {
            if (terms.length > 0) {
                terms.forEach(trm => {
                    taxonomyTerms.push({
                        name: trm.Name,
                        key: trm.Id.split('(')[1].replace(')/', ''),
                        parent: trm['Parent'] ? trm['Parent'].Id.split('(')[1].replace(')/', '') : null
                    })
                });

                this.setState({
                    TaxonomyTerms: taxonomyTerms
                })
            }
        }

        catch (error) {
            console.log("An error occurred while fetching the terms from the term store....");
        }


        try {

            if (terms.length > 0) {
                terms.forEach(termsl2 => {
                    if (termsl2['Parent'] !== null) {
                        taxonomyTerms.forEach(terml1 => {                           
                            if (termsl2['Parent'].Id === terml1.key) {           
                                termslevel2.push({
                                    name: termsl2.Name,
                                    key: termsl2.Id.split('(')[1].replace(')/',''),
                                    parent: termsl2['Parent'].Id
                                })
                            }
                        });
                    }
                });
                this.setState({
                    TaxonomyTermslevel1: termslevel2
                })

            }
        }
        catch (e) {
            console.log("error in level 2" + e);
        }

[simonagren]

I dont understand if you ment to get the TermSet group, or just make the "three of the terms"?
If you ment TermSet group "please let me know how to split out terms group".
Then you could do:

const store: ITermStore = await taxonomy.termStores.getByName("Taxonomy_storeID");
const setWithData = await store.getTermSetById(this.props.TermSetId);
const termSetGroup = await setWithData.group.get();
console.log(termSetGroup.Name);

Don't have time right now to look at the tree structure. Could have a look later!

[simonagren]

I wrote some code that should work to build a tree with the Name atleast, you might have to rework it some.
Let me know how it goes and if you need more help :)

import { taxonomy, ITermStore, ITermSet, ITerms, ITerm, ITermData, ITermStoreData} from "@pnp/sp-taxonomy";

// Get TermSet as a tree
// You might want the termstorename and termsetId as properties
private async getTermSetAsTree(): Promise<any> {      
    const store: ITermStore = await taxonomy.termStores.getByName("Taxonomy_BXNhZFumwYDfQvlT5Br52A==");
    const setWithData = await store.getTermSetById('7a167c47-2b37-41d0-94d0-e962c1a4f2ed');

   // All terms
    const terms = await setWithData.terms.get();
   // Tree to hold structure
   let tree = { Terms: [] };
    // Loop trough all and call Build recursively
    terms.forEach(trm => {
        let names = trm.PathOfTerm.split(';');
        // Get term with subterms (only names)
        let term = this.Build(tree.Terms, names);
        if(tree.Terms.filter(t => t.Name === term.Name).length === 0) {
            tree.Terms.push(term);
        }
    })
    return await tree;
    }



private Build(tree, names): any {
    // If term exist in tree use that, else create a new with the name
    let term = tree.Terms.filter(t => t.Name === names[0]).length > 0 ? tree.Terms.filter(t => t.Name === names[0])[0] : { Name: names[0], Terms: [] } ;
    names.shift();
    if (names.length > 0) {
        let child = this.Build(term.Terms, names);
        if (!term.Terms[child]) {
            term.Terms.push(child);
        }
    }
    return term;
}

[simonagren]

One more. Habaneroconsulting has this old goodie that I slightly rewrote. Look at the URL if you want some inspiration regarding sorting: https://www.habaneroconsulting.com/stories/insights/2014/returning-a-sharepoint-2013-termset-in-a-tree-structure-using-javascript

const store: ITermStore = await taxonomy.termStores.getByName("Taxonomy_BXNhZFumwYDfQvlT5Br52A==");
      const setWithData = await store.getTermSetById('7a167c47-2b37-41d0-94d0-e962c1a4f2ed');

     // All terms
      const terms = await setWithData.terms.get();
      let tree = { term: terms,
                   children: [] };

      // Loop through each term
      terms.forEach(trm => {
          var currentTerm = trm;
          var currentTermPath = currentTerm.PathOfTerm.split(';');
          var children = tree.children;

          // Loop through each part of the path
          for (var i = 0; i < currentTermPath.length; i++) {
              var foundNode = false;

              for (var j = 0; j < children.length; j++) {
                  if (children[j].name === currentTermPath[i]) {
                      foundNode = true;
                      break;
                  }
              }

              // Select the node, otherwise create a new one
              var term = foundNode ? children[j] : { name: currentTermPath[i], children: [] };

              // If we're a child element, add the term properties
              if (i === currentTermPath.length - 1) {
                  term.term = currentTerm;
                  term.title = currentTerm.Name;
                  term.guid = currentTerm.Id.toString();
              }

              // If the node did exist, let's look there next iteration
              if (foundNode) {
                  children = term.children;
              }
              // If the segment of path does not exist, create it
              else {
                  children.push(term);

                  // Reset the children pointer to add there next iteration
                  if (i !== currentTermPath.length - 1) {
                      children = term.children;
                  }
              }
          }
      })

      console.log(tree);

[veeramanx]

Hi simonagren, Thank you for sharing the code. let me work on that and keep you updated.

[patrick-rodgers]

Going to close this as answered, it looks like you've got some good code examples. If you need to continue the conversation please _reopen_ the issue. Thanks!