How to display additional fields from Lookup table with JsLink

Question

I have a list (Jobs) with a lookup field (Market) to another list (Markets) which contain the Market details (city,state,zip).

In the View display, I want to show the Market name from Jobs as well as the additional fields from Markets.

Is what I'm trying to do, doable in this way?

This is what I have so far...

var itemCtx = [];
itemCtx.Templates = {};

itemCtx.Templates.Fields = {
    'JobTitle': {
        'View': TitleToLink
    },
    'Market': {
        'View': MarketNoLink
    },
    'Market_x003a_Office_x0020_City': {
        'View': locationTemplate
    },
    'Market_x003a_StateLU': {
        'View': locationTemplate
    }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);

function MarketNoLink(ctx) {
   var market = ctx.CurrentItem.Market[0].lookupValue;
   var city = ctx.CurrentItem.Market_x003a_Office_x0020_City;
   var state = ctx.CurrentItem.Market_x003a_StateLU;

   console.log(market);

   var newMarket = "<span class='text-capitalize'>" + market.toLowerCase() + "
   </span>";
   newMarket = newMarket + "<div>" + city + ", " + state + "</div>";
   //"<span class='custWidthField'>"+item.Market[0].lookupValue+"</span>";

   return newMarket;
}
function locationTemplate(ctx) {
   var city = ctx.CurrentItem.Market_x003a_Office_x0020_City;
   var state = ctx.CurrentItem.Market_x003a_StateLU;
   return "<span>" + city + ", " + state + "</span>";
}

Answer 1

If the City and State are coming back as undefined, make sure they are included in the view that your JSLink is being applied to. If they are not included in the view, they will return undefined.

Hope that helps!

Tony

Answer 2

Which bits of this are working for you? I've tested the code and it works for me

var itemCtx = [];
itemCtx.Templates = {};

itemCtx.Templates.Fields = {
    'JobTitle': {
        'View': "jjjj"
    },
    'Market': {
        'View': MarketNoLink
    },
    'Market_x003a_Office_x0020_City': {
        'View': locationTemplate
    },
    'Market_x003a_State_x0020_UI': {
        'View': locationTemplate
    }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);

function MarketNoLink(ctx) {
   var market = ctx.CurrentItem.Market[0].lookupValue;
   var city = ctx.CurrentItem.Market_x003a_Office_x0020_City;
   var state = ctx.CurrentItem.Market_x003a_State_x0020_UI;

   console.log(market);

   var newMarket = "<span class='text-capitalize'>tttt" + market.toLowerCase() + "</span>";
   newMarket = newMarket + "<div>cccc" + city + ", " + state + "</div>";
   //"<span class='custWidthField'>"+item.Market[0].lookupValue+"</span>";

   return newMarket;
}
function locationTemplate(ctx) {
   var city = ctx.CurrentItem.Market_x003a_Office_x0020_City;
   var state = ctx.CurrentItem.Market_x003a_State_x0020_UI;
   return "<span>" + city + ", " + state + "</span>";
}

Answer 3

It seems you haven't added city and State column in the view.Make sure columns used in code are selected in view also.