Search code examples
c#javascriptasp.net-mvc-3knockout.jsknockout-mapping-plugin

Serializing an object containing an array


-this problem has been fixed by myself-

SO I'm trying to use knockoutJS and was testing the mapping plugin and I'm having some problems with Serializing an object which contains and array

below is the controller i have and the javascript below that, The issue i have is no matter what i try (you can see the commented out attempts to fix) I can not get the array of children to pass to the javascript to display the children -{"id":5,"name":"Testing this works","children":"[{},{}]"} is all that is passed.

Someone able to point me the right direction please

namespace TestingKnockout.Controllers
{ 
public class child
{
    int id;
    String name;

    public child(int id, string name)
    {
        this.id = id;
        this.name = name;
    }
}
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }   

    public virtual string GetData()
    {
        List<child> childrenList = new List<child>(){
                new child(2, "bob"),
                new child(4, "dave")
        };
        var result = new
        {
            id=5,
            name="Testing this works",
            children = childrenList
            //children = Newtonsoft.Json.JsonConvert.SerializeObject(childrenList)
            //children = new{ id = 2, name = "bob" }

        };

        //String resultsToHighlightJSON =                    Newtonsoft.Json.JsonConvert.SerializeObject(childrenList);
        //return resultsToHighlightJSON;
        return new JavaScriptSerializer().Serialize(result);// +resultsToHighlightJSON;
    }
}
}

And this is my javascript:

<script language="javascript" type="text/javascript">
  var originalData = {
      id: 1,
      name: "Main",
      children: []
  };

  var updatedData = {
      id: 1,
      name: "Main",
      children: [{ id: 2, name: "bob" }, { id: 3, name: "ted"}]
  };

  function Child(id, name) {
      this.id = ko.observable(id);
      this.name = ko.observable(name);
  }

  var options = {
      children: {
          key: function (data) {
              return ko.utils.unwrapObservable(data.id);
          }
      }
  }

  var viewModel = ko.mapping.fromJS(originalData, options);

  viewModel.counter = 1;
  viewModel.addChild = function () {
      viewModel.children.push(new Child(++viewModel.counter, "new"));
  };



  viewModel.applyUpdate = function () {
  var basePath="<%: Url.Content("~/") %>";
  var url = basePath + 'Home/GetData/';
   $.get(url, function (response) {
              var Employee = $.parseJSON(response);
              $("#EditLink").html("testing this out : " + Employee.children[1].name);
      //ko.mapping.fromJS( updatedData,viewModel);
      ko.mapping.fromJS( Employee,viewModel);
              });
  }

  $(document).ready(function() {
      ko.applyBindings(viewModel);
  });


Solution

  • public class child
    {
        public int id { get; set; }
        public String name { get; set; }
    
        public child(int id, string name)
        {
            this.id = id;
            this.name = name;
        }
    }
    

    My mistake was i did not set public properties