0

I´ve an problem to map my json array to an observable array.

I´ve got an error "Cannot read property 'fromJSON' of undefined"

This are my linked knockout scripts:

knockout-3.2.0.js knockout.mapping-latest.js knockout.mapping-latest.debug.js

My Json array looks like this:

[
{"$id":"1","GR":10},
{"$id":"2","GR":20},
{"$id":"3","GR":30},
{"$id":"4","GR":40},
{"$id":"5","GR":50},
{"$id":"6","GR":60},
{"$id":"7","GR":70},
{"$id":"8","GR":80}
]

And This is my vieModel: 

function FormViewModel() {

var self = this;
self.CpGrp = ko.observable([]);
self.GR = ko.observableArray();

$(document).ready(function (){

....


done: function (e, data) {
                $(".progress").removeClass("progress-striped active"); // we're done

                debugger;

                var test
                $.getJSON("/api/Points",
                    function (dataa) {
                        dataType: 'json'

                   test = ko.toJSON(dataa);

                        ko.mapping.fromJSON(test, {}, self)


                    }
                )},


ko.applyBindings(new FormViewModel());

Where is the Bug?

Andreas Klumpe
  • 23
  • 1
  • 7
  • this error says that ko.mapping does not exist...ensure you've got the mapping plugin loaded – beauXjames Dec 05 '14 at 14:25
  • once you confirm that your mapping file is included, just be sure it's loaded after knockout is loaded...and you can use ko.mapping.fromJS instead of fromJSON – beauXjames Dec 05 '14 at 14:29
  • Its evident mapping plugin not referred properly `fromJSON` is `undefined` i.e mapping is null that says all . – super cool Dec 05 '14 at 14:58
  • check the order you referred by any means your refereed mapping plugin in before knockout.js or jquery may be . – super cool Dec 05 '14 at 15:01

1 Answers1

0

Most probably you're including the js files of ko and ko.mapping after your script tries to use them.

Review your page, and your layout and check if your scripts are using the ko and ko.mapping before the <script> tags that you use to include them (or the bundle rendering, if you're bundling them).

You can check the source code of the page in the browser, or review the _layout.cshtml to check if this is the problem. Pay special attention to where the scripts section is rendered, if it's defined in your layout and used in your pages.

You can also explicitly include the ko and ko.mapping js files right before your script and check if this makes it work.

If this is the problem, please, include the scripts in the right order, or run your scripts after all the page has been loaded, for example using them inside $(document).ready(function {/*your script here*/}).

JotaBe
  • 38,030
  • 8
  • 98
  • 117
  • Thank you the error is gone but the mapping is stil not working. There are no values in my GR observable Array. Maybe the GR Values from JSON can not match to my obersevable. How can i check this? – Andreas Klumpe Dec 08 '14 at 13:51
  • Ok i´ve make it on the old way: `code` for (var i = 0; i < data.length; i++){ self.GR.push(data[i].GR) } – Andreas Klumpe Dec 08 '14 at 15:51
  • Please, if the first problem has dissapeared, accept this an answer. If you have a second problem with the mapping, don't doubt to create a new question that clearly explains what ypu get form the API, what you want to get in the ViewModel, and how many times the ajax called is executed. It's better to know whay it fails, why the alternative works, and what is the best way to do it. I'll be glad to hlep you again. If you do so, please, add a comment. – JotaBe Dec 08 '14 at 16:19
  • @AndreasKlumpe I have some ideas of what can be happening about your observable array, but I need to know what's exactly going on. Most times the problem is that you overwrite the whole original observable array, the one bound, with a new observable array which reamins unbound. OTOH, you can google `push.apply` samples to append all the items at once instead of using a for loop. (For example: http://stackoverflow.com/questions/15444242/why-doesnt-array-push-apply-work) – JotaBe Dec 08 '14 at 20:44