Knockout JS Uncaught TypeError: Cannot read property 'fromJS' in Oracle Cloud

Question

I am getting this error in Knockout.js:

Uncaught TypeError: Cannot read property 'fromJS' of undefined

I am new to Knockout JS.I am developing Knockout JS in Oracle Content and Experience Cloud. My scenario is I am trying to call Rest API and get the results and display it in table.

I am using below REST API url to test in my application http://learn.knockoutjs.com/mail?folder=inbox

Below is my code:

/* globals define */
define(['knockout', 'jquery', 'text!./knockout.mapping-latest.js', 'text!./mailbox.json', 'css!./css/design.css'], function (ko, $, mapping, css) {
    'use strict';
    // ----------------------------------------------
    // Define a Knockout Template for your component
    // ----------------------------------------------
    var sampleComponentTemplate = 
        '<div>' + 
        '<p><input data-bind="value: searchValue" class="box"/></p>' +
        '<button data-bind="click: getCustomers">Knock out Search</button>' +
        '</div>' +  
        '<table>' +
            '<thead>' +
                '<tr>' +                
                    '<th>From</th>' + 
                    '<th>To</th>' + 
                    '<th>Subject</th>' + 
                    '<th>Date</th>' + 
                '</tr>' + 
            '</thead>' + 
            '<tbody data-bind="foreach: mails">' + 
                '<tr>' +
                    '<td data-bind="text: from"></td>' +  
                    '<td data-bind="text: to"></td>' + 
                    '<td data-bind="text: subject"></td>' + 
                    '<td data-bind="text: date"></td>' +                    
                '</tr>' +
            '</tbody>' + 
        '</table>';



// ----------------------------------------------
    // Define a Knockout ViewModel for your template
    // ----------------------------------------------
    var SampleComponentViewModel = function (args) {
    this.searchValue = ko.observable("Hi");

 this.mails = ko.observableArray();    
  this.getCustomers = function () {     
    alert("Inside get customers ");
        $.ajax({
            type: 'GET',             
            crossDomain: true, 
            url: 'documents/folder/F49A137E34CB4B6DFD302FB90A04F4D8CA1E8A3D5B3E/_assets/mailbox.json',
            data: JSON.stringify(this.mails),             
            success: function(data) {           
                var observableData = ko.mapping.fromJS(data);
                var array = observableData();
                this.mails(array);

            },
            error:function(jq, st, error){
                alert("Inside Error Method " + error + " jq is " + jq + "st is " + st);
            }
        });
    };

    };

Answer 1

I solved it by initializing self =this, and replacing this in the code with self