Refer below JS file in your page where you need to bind the keywords:
<script type="text/javascript" src="/_layouts/15/SP.Taxonomy.js"></script>//Current Context
var context = SP.ClientContext.get_current();
var groupID;
var groupName;
var termSetID
var termSetName;
var currentTermName;
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
getTermStores();
});
//Get Term Store from Taxonomy
function getTermStores() {
session = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);
termStore = session.getDefaultSiteCollectionTermStore();
context.load(session);
context.load(termStore);
context.executeQueryAsync(onListTaxonomySession, onFailListTaxonomySession);
}
//Load All Groups from Term Store
function onListTaxonomySession () {
groups = termStore.get_groups();
context.load(groups);
context.executeQueryAsync(onRetrieveGroups, onFailRetrieveGroups);
}
//Get Only Sytem Group
function onRetrieveGroups() {
var groupEnum = groups.getEnumerator();
while (groupEnum.moveNext()) {
var currentGroup = groupEnum.get_current();
groupID = currentGroup.get_id();
groupName = currentGroup.get_name();
if (groupName == "System") {
showTermSets(groupID,groupName);
}
}
}
//Get only keywords Group from System Group
function showTermSets(groupID, groupName) {
var groupEnum = groups.getEnumerator();
while (groupEnum.moveNext()) {
var currentGroup = groupEnum.get_current();
if (currentGroup.get_id() == groupID) {
// We need to load and populate the matching group first, or the
// term sets that it contains will be inaccessible to our code.
context.load(currentGroup);
context.executeQueryAsync(
function () {
// debugger;
// The group is now available becuase this is the
// success callback. So now we'll load and populate the
// term set collection. We have to do this before we can
// iterate through the collection, so we can do this
// with the following nested executeQueryAsync method call.
var termSets = currentGroup.get_termSets();
context.load(termSets);
context.executeQueryAsync(
function () {
var termSetEnum = termSets.getEnumerator();
while (termSetEnum.moveNext()) {
var currentTermSet = termSetEnum.get_current();
termSetName = currentTermSet.get_name();
termSetID = currentTermSet.get_id();
if (termSetName == "Keywords") {
showTerms(groupID, groupName,termSetID,termSetName);
}
}
},
function () {
//Failure to load term set
alert('An error occurred in loading the term sets for this group:' + args.get_message());
});
},
function () {
//Failure to load current group
alert('An error occurred in loading the term sets for this group: ' + args.get_message());
});
break;
}
}
}
//Get all Keywords
function showTerms(groupID, groupName, termSetID, termSetName) {
var groupEnum = groups.getEnumerator();
while (groupEnum.moveNext()) {
var currentGroup = groupEnum.get_current();
if (currentGroup.get_name() == groupName) {
context.load(currentGroup);
context.executeQueryAsync(
// The group is now available becuase this is the
// success callback. So now we'll load and populate the
// term set collection. We have to do this before we can
// iterate through the collection, so we can do this
// with the following nested executeQueryAsync method call.
function () {
var termSets = currentGroup.get_termSets();
context.load(termSets);
context.executeQueryAsync(
function () {
// debugger;
// The term sets are now available because this is the
// success callback. So now we'll iterate through the collection
// and get a reference to the specific term set that was represented
// by the clicked div.
var termSetEnum = termSets.getEnumerator();
while (termSetEnum.moveNext()) {
var currentTermSet = termSetEnum.get_current();
if (currentTermSet.get_name() == termSetName) {
// We need to load and populate the term set, so that we can
// access the terms in it.
context.load(currentTermSet);
context.executeQueryAsync(
function () {
// debugger;
// Now we have access to the term set because this is the
// success callback, so we can now create and populate a collection
// object to hold the actual terms.
// Note that we need to do one final load and populate before we
// can iterate over the collection object.
var terms = currentTermSet.get_terms();
context.load(terms);
context.executeQueryAsync(
function () {
//debugger;
// Now we can iterate over the terms because this is the
// success callback. So we'll build an indented list of terms
var termsEnum = terms.getEnumerator();
while (termsEnum.moveNext()) {
var currentTerm = termsEnum.get_current();
currentTermName = currentTerm.get_name();
// '#NewsCategory' is ID of HTML Select
$('#NewsCategory').append('<option value="' + currentTermName + '">' + currentTermName + '</option>');
}
},
function () {
//Failure to load terms
alert('An error occurred when trying to retrieve terms in this term set:'+args.get_message());
});
},
function () {
alert('An error occurred when trying to retrieve terms in this term set:'+args.get_message());
//Failure to load the current term set
});
break;
}
}
},
function () {
//Failure to load term sets
alert('An error occurred when trying to retrieve terms in this term set:' + args.get_message());
});
},
function () {
//Failure to load current group
alert('An error occurred when trying to retrieve terms in this term set:' + args.get_message());
});
break;
}
}
}
function onFailListTaxonomySession(sender, args) {
alert('An Error Occured when trying to retrive Taxonomy session:' + args.get_message());
}
function onFailRetrieveGroups(sender, args) {
alert("Failed to retrieve groups. Error:" + args.get_message());
}
Note:
Give Read permission to Taxonomy in APPManifeast.xml as shown below:
Summary
In this code snippet we have explored how to get all keywords from Taxonomy using JavaScript. I hope that the above code will be very useful to you and also I’ve attached the solution for your more reference.
Happy Coding