Knockout JS changing my viewmodel creation to use mapping pulgin
===

I am relatively new to `Knockout.js` and have a question regarding the creating of the view model.

What I am currently doing is:

    viewModel = {

                    Menu: ko.observableArray(ko.utils.parseJson(data)),

                    editMenu: function (menu) {
                        ko.applyBindings(menu, document.getElementById("MenuCategories"));
                        $("#MenuCategories").bPopup();
                    }

There is more than one function, but trying to keep it short.

What I want to do is use the mapping plugin because my json data that I am using contains arrays of objects with each object containing an array and each object in that array also contains an array. What the JSON looks like:

    [
      {
        "Id": 1,
        "Name": "Test 5",
        "Description": "Testing menu",
        "BeveragesMenu": false,
        "Active": true,
        "Categories": [
          {
            "Id": 1,
            "Name": "Test 1",
            "Active": true,
            "MenuItems": [
            {
              "Id": 1,
              "Name": "Food",
              "Description": "2 Eggs and Bread",
              "Price": 50,
              "DateBased": false,
              "PriceOnRequest": false,
              "DateFrom": null,
              "DateTo": null,
              "Active": true
            }
          ]
        },
        {
          "Id": 2,
          "Name": "Test 2",
          "Active": true,
          "MenuItems": [
            ]
         },
         {
           "Id": 1004,
           "Name": "test",
           "Active": true,
           "MenuItems": [
            ]
         },
         {
           "Id": 1005,
           "Name": "Test 4",
           "Active": true,
           "MenuItems": [
             ]
         }
       ]
     },
     {
       "Id": 92,
       "Name": "Test 4",
       "Description": "",
       "BeveragesMenu": false,
       "Active": false,
       "Categories": [
       {
         "Id": 1006,
         "Name": "Test 1",
         "Active": true,
         "MenuItems": [
         {
           "Name": "Test",
           "Description": "",
           "Price": "",
           "DateBased": false,
           "PriceOnRequest": false
          }
        ]
      }
    ]
    },
    {
    "Id": 93,
    "Name": "Test 6",
    "Description": "",
    "BeveragesMenu": false,
    "Active": false,
    "Categories": [
      
    ]
    },
    {
    "Id": 94,
    "Name": "Test 9",
    "Description": "",
    "BeveragesMenu": false,
    "Active": false,
    "Categories": [
      
    ]
    },
    {
      "Id": 95,
      "Name": "Test 20]",
      "Description": "",
      "BeveragesMenu": false,
      "Active": false,
      "Categories": [
      {
        "Id": 4,
        "Name": "Test 6666",
        "Active": true,
        "MenuItems": [
          
        ]
      }
    ]
    },
    {
      "Id": 96,
      "Name": "Test 444",
      "Description": "",
      "BeveragesMenu": false,
      "Active": false,
      "Categories": [
      {
        "Id": 3,
        "Name": "Test 555",
        "Active": true,
        "MenuItems": [
          
        ]
      },
      {
        "Id": 5,
        "Name": "Test 6666",
        "Active": true,
        "MenuItems": [
          
        ]
      },
      {
        "Id": 1003,
        "Name": "test 777",
        "Active": true,
        "MenuItems": [
          
        ]
      }
    ]
    }
    ]

Sorry for the long JSON code paste.

So now I am running into problems when updating certain parts of the objects within arrays withing objects etc.

So I taught that the mapping plugin might solve my problem as it creates all arrays as observable and I am assuming that is my problem.

So I tried:

    viewModel = {
                    Menu: ko.mapping.fromJSON(ko.utils.parseJson(data)),
                    //Menu: ko.observableArray(ko.utils.parseJson(data)),

                    editMenu: function (menu) {
                        ko.applyBindings(menu, document.getElementById("MenuCategories"));
                        $("#MenuCategories").bPopup();
                    },

But then none of my binding are working and I can't seem to find the cause, any advice or tips on this matter would be appreciated.

Thanks