javascript - Why knockout.mapping fails on some data-structures? -

using knockout.mapping try map json ko-object. when trying use more advanced solutions mapping options got uncaught typeerror: g not function. tried figure out problem, still confused.

lets have pretty simple model:

var data1 = { // works   a: "a",   b: [      { b1: "v1" },      { b2: "v2" }    ]  }; 

now consuming model works fine this:

function viewmodel ( data ) {   var self = this;   var    = ko.mapping.fromjs( data, { observe: "a"} );    return a; }  var vm1 = viewmodel( data1 ); // works 

i have 2 properties (a , b) in model, need a observable, while b should copied viewmodel.

sadly not work well, if data-structure gets deeper:

var data1 = { // works   a: "a",   b: [      { b1: "v1" },      { b2: "v2" }    ]  };  var data2 = { // uncaught typeerror: g not function   a: "a",   b: [      { b1: { name: "v1" } },      { b2: { name: "v2" } }    ] };  var data3 = { // uncaught typeerror: g not function   a: "a",   b1: { name: "v1" },    b2: { name: "v2" }  };  var data4 = { // works   a: "a",   b1: "v1",    b2: "v2"   };  var data5 = { // works   a: "a",   b1: ["1::v1", "2::v1"],    b2: ["1::v2", "2::v2"]   };  function viewmodel ( data ) {   var self = this;   var    = ko.mapping.fromjs( data, { observe: "a"} );    return a; }  var vm1 = viewmodel( data1 ); // works var vm2 = viewmodel( data2 ); // uncaught typeerror: g not function var vm3 = viewmodel( data3 ); // uncaught typeerror: g not function var vm4 = viewmodel( data4 ); // works var vm5 = viewmodel( data5 ); // works 

it seems baffling copying structures works , other not. understand, problem jumps in, when there multilevel hash somewhere in tree.

is desired behavior or wrong here? why copying structure works while other not?

i've succesfully reproduced issue mentioned:

var data1 = { // works    a: "a",    b: [       { b1: "v1" },       { b2: "v2" }     ]   };    var data2 = { // uncaught typeerror: g not function    a: "a",    b: [       { b1: { name: "v1" } },       { b2: { name: "v2" } }     ]  };    function viewmodel ( data ) {    var self = this;    var = ko.mapping.fromjs( data, { observe: ["a"]} );    return a;  }    var vm1 = viewmodel( data1 ); // works  var vm2 = viewmodel( data2 ); // uncaught typeerror: g not function

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>

as can see, in repro include non-minified versions of both libs. stepped on error, , it's here, in code:

if(options.observe.length > 0 && ko.utils.arrayindexof(options.observe, fullpropertyname) == -1) {     mappedrootobject[indexer] = value(); // <---- line     options.copiedproperties[fullpropertyname] = true;     return; } 

that line struck me odd, because typically ko need explicitly need "unwrap" values if you're unsure if they're plain value or observable.

so went the relevant source code on github, surprise, above code cdnjs version is not there, it's different:

if(options.observe.length > 0 && ko.utils.arrayindexof(options.observe, fullpropertyname) == -1) {     mappedrootobject[indexer] = ko.utils.unwrapobservable(value); // <-- different     options.copiedproperties[fullpropertyname] = true;     return; } 

that line way i'd expect be.

then again, the recent debug build has buggy/first version again.

then more digging, see there's issue #137 problem. issue ends same conclusion reached: fix not included in 2.4.1 build. there not new builds: can see in the project's readme project not actively being maintained.

bottom line: you'll need either work around situation, or create own custom build of mapping problem fixed.