How to Retrieve a Lookup Field Value in JS LINK

1
var lookupSample = lookupSample '' {};
2

3
lookupSample.CustomizeFieldRendering = function () {
4
  // Intialize the variables for overrides objects
5
  var overrideCtx = {
6
    Templates: {
7
      Fields: {
8
        'singleLookupValue': {
9
          'View' : lookupSample.singleLookupValue
10
        },
11
        'multiLookupValue': {
12
          'View' : lookupSample.multiLookupValue
13
        }
14
      }
15
    }
16
  };
17

18
  // Register the override of the field
19
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
20
}
21

22
lookupSample.singleLookupValue = function (ctx) {
23
  var output = [];
24

25
  var field = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
26
  // Check if field contains data
27
  if (field.length > 0) {
28
    // field[0].lookupId -> gives you the linked item ID
29
    var lookupValue = field[0].lookupValue;
30
  }
31
  // Push the value to the array
32
  output.push(lookupValue);
33
  return output.join('');
34
}
35

36
lookupSample.multiLookupValue = function (ctx) {
37
  var output = [];
38

39
  var field = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
40
  // Check if field contains data
41
  if (field.length > 0) {
42
    output.push('<ul>');
43
    for (i = 0; i < field.length; i++) {
44
      output.push('<li>');
45
      output.push(field[i].lookupValue);
46
      output.push('</li>');
47
    }
48
    output.push('</ul>');
49
  }
50

51
  return output.join('');
52
}
53

54
lookupSample.CustomizeFieldRendering();