How can one fetch values via JavaScript from a SharePoint list with columns that have values stored via term store?

Question

I have a jqGrid where 2 columns have values which come from the termstore.

The values in the column "Mandant" and "Vertragspartner" are stored via term store management tool and not being fetched:

In the list view itself, I can see the values:

This is the important part of the JavaScript code, but I don't know how I have to change it to get the data, and to put it into the jqgrid since it just makes a simple Ajax call.

How come no one asked this question beforehand? I wasn't able to find a solution on the internet.

function loadSubTables() {
    loadGrid("Vertragserstellung", "&$select=Id,Title,SPLUSCMGTClient,SPLUSCMGTArea,SPLUSCMGTContractType,bscomProcStatus,Vertrags,SPLUSCMGTEndDate,SPLUSCMGTStartDate,Created,Modified,Vertragsstatus&$orderby=Id desc&$top=9999", "gridmyopen", cnMyEntries, cmMyEntries, true);
}

function loadGrid(listname, query, divname, columns, columnModels, showFilter, showExcelExport, hideFooter) {

    $("#" + divname).jqGrid({
        rowNum: '',
        footerrow: hideFooter,
        datatype: function () {
            loadGridData(listname, query, divname);
        },
        colNames: columns,
        colModel: columnModels,
        autowidth: true,
        loadonce: true, 
        gridComplete: function () {
            $("#" + divname).jqGrid('setGridParam', { datatype: 'local' });
            $("#" + divname + "no").html(" [" + $("#" + divname).jqGrid('getGridParam', 'records') + "]");
            $('.ui-jqgrid .ui-jqgrid-bdiv').css('overflow-x', 'hidden'); // hides horizontal scrollbar
        },
        ondblClickRow: function (rowid, iRow, iCol, e) {
            onDoubleClickGrid(rowid, iRow, iCol, e, divname, listname);
        }
    });
    
    if (showFilter) {
        $("#" + divname).jqGrid('filterToolbar', {
            autosearch: true,
            stringResult: false,
            searchOnEnter: true,
            defaultSearch: "cn",
        });
    }
}

function loadGridData(listname, query, divname) {
    $.ajax({
        url: "https://company.de/sites/appContracts/_api/web/lists/getbytitle('" + listname + "')/Items?" + query,
        type: "GET",
        headers: { "Accept": "application/json;odata=verbose" },
        success: function (data, textStatus, xhr) {
            console.log("dat.d.results: ", data.d.results);
            var thegrid = $("#" + divname)[0];
            thegrid.addJSONData(data.d.results); 
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("error:" + JSON.stringify(xhr));
            $('#' + divname + 'records').html(" [0]");
        }
    });
}

Answer 1

Usually we use TaxCatchAll in SharePoint REST API to get the Managed Metadata column values.

$select=TaxCatchAll/ID,TaxCatchAll/Term&$expand=TaxCatchAll

You could check this article for more: https://sympmarc.com/2017/06/19/retrieving-multiple-sharepoint-managed-metadata-columns-via-rest/