Uncaught TypeError: Cannot read property 'map' of null Knockout js

Question

Getting an uncaught TypeError: Cannot read property 'map' of null in my js knockout file. I haven't ran into this issue before and it looks fine to me. Am I missing something here?

code:

var ProcessorReviewerAssignmentViewModel = function (obj, token) {
    obj = obj || {
        PrsnPk: 0,
        MaxCapacity: 0,
        RemainCapacity: 0,
        MinLoanAmt: 0,
        MaxLoanAmt: 0,
        MinAppraisalScore: 0,
        MaxAppraisalScore: 0,
        MinBpoScore: 0,
        MaxBpoScore: 0,
        AutoAssignEligible: false,
        IsGetNext: false,
        IsHighValueReady: false,
        IsAppraiserScore: false,
        ReviewTiers: [],
        LoanClassifications: [],
        AppraisalScoreRanges: [],
        BPOAppraisalScoreRanges: [],
        CurrentAppraiserScoreSelection: 0,
        CurrentBPOAppraiserScoreSelection: 0,

        //For Reviewer Services
        ReviewerServices: []
    }

    var self = this;

    //Value to determine if any of the values in Services are selected or not.
    //So if any services aren't selected, we want to select ALL services, otherwise deselect ALL services.
    var isUnChecked = ko.observableArray();

    //set up anti-forgery tokens for ajax calls to server
    $.ajaxSetup({
        headers: { 'RequestVerificationToken': token }
    });

    //observables to mimic the server model
    self.PrsnPk = ko.observable(obj.PrsnPk);
    self.MaxCapacity = ko.observable(obj.MaxCapacity);
    self.RemainCapacity = ko.observable(obj.RemainCapacity);
    self.MinLoanAmt = ko.observable(obj.MinLoanAmt);
    self.MaxLoanAmt = ko.observable(obj.MaxLoanAmt);
    self.MinAppraisalScore = ko.observable(obj.MinAppraisalScore);
    self.MaxAppraisalScore = ko.observable(obj.MaxAppraisalScore);
    self.MinBpoScore = ko.observable(obj.MinBpoScore);
    self.MaxBpoScore = ko.observable(obj.MaxBpoScore);
    self.IsAppraiserScore = ko.observable(obj.IsAppraiserScore);
    self.AutoAssignEligible = ko.observable(obj.AutoAssignEligible);
    self.IsGetNext = ko.observable(obj.IsGetNext);
    self.IsHighValueReady = ko.observable(obj.IsHighValueReady);
    self.CurrentAppraiserScoreSelection = ko.observable(obj.CurrentAppraiserScoreSelection);
    self.CurrentBPOAppraiserScoreSelection = ko.observable(obj.CurrentBPOAppraiserScoreSelection);
    //AppInstId for Reviewer Services
    self.AppInstId = ko.observable(obj.AppInstId);

    //map arrays to mimic the server objects created from db
    self.ReviewTiers = ko.observableArray(obj.ReviewTiers.map(function (element) {
        return {
            IsSelected: ko.observable(element.IsSelected),
            Description: ko.observable(element.Description),
            ReviewTierId: ko.observable(element.ReviewTierId)
        }
    }));

    self.LoanClassifications = ko.observableArray(obj.LoanClassifications.map(function (element) {
        return {
            IsSelected: ko.observable(element.IsSelected),
            SystemCode: ko.observable(element.SystemCode),
            Description: ko.observable(element.Description)
        }
    }));

    self.AppraisalScoreRanges = ko.observableArray(obj.AppraisalScoreRanges.map(function (element) {
        return {
            IsSelected: ko.observable(element.IsSelected),
            Description: ko.observable(element.Description),
            AppraisalScoreRangeID: ko.observable(element.AppraisalScoreRangeID)
        }
    }));

    self.BPOAppraisalScoreRanges = ko.observableArray(obj.BPOAppraisalScoreRanges.map(function (element) {
        return {
            IsSelected: ko.observable(element.IsSelected),
            Description: ko.observable(element.Description),
            AppraisalScoreRangeID: ko.observable(element.AppraisalScoreRangeID)
        }  

    }));

    //Observable array to keep track of Reviewer services selected in view
    **self.ReviewerServices = **ko.observableArray(obj.ReviewerServices.map(function (element)**** {
        if (element.IsSelected === false) {
            isUnChecked.push(element.IsSelected);
        }
        return {
            ServiceId: ko.observable(element.ServiceId),
            ServiceAliasDescription: ko.observable(element.ServiceAliasDescription),
            IsSelected: ko.observable(element.IsSelected)
        }
    }));

The error is occurring at:

 self.ReviewerServices = ko.observableArray(obj.ReviewerServices.map(function (element)

I think this may be because ReviewerServices could be null when this page is loaded?

Thank you for your input.

Answer 1

Making a guess here, but since your code starts off with obj = obj || { ... }, it seems likely that your function is called with an object that doesn't contain ReviewerServices. The simple fix is to add

obj.ReviewerServices = obj.ReviewerServices || [];

in the line following obj = obj || { ... }, or if you want to ensure all those properties are set to the defaults, if they don't exist in obj:

obj =  {
  ...{
      PrsnPk: 0,
      MaxCapacity: 0,
      RemainCapacity: 0,
      MinLoanAmt: 0,
      MaxLoanAmt: 0,
      MinAppraisalScore: 0,
      MaxAppraisalScore: 0,
      MinBpoScore: 0,
      MaxBpoScore: 0,
      AutoAssignEligible: false,
      IsGetNext: false,
      IsHighValueReady: false,
      IsAppraiserScore: false,
      ReviewTiers: [],
      LoanClassifications: [],
      AppraisalScoreRanges: [],
      BPOAppraisalScoreRanges: [],
      CurrentAppraiserScoreSelection: 0,
      CurrentBPOAppraiserScoreSelection: 0,
      ReviewerServices: []
  }, 
  ...obj
}

in place of obj = obj || { ... }