locked
Bind complex model in knockout JS RRS feed

  • Question

  • User-2133486755 posted

    I have the following JSON complex object.

        {"User":
        	{
        	"$id":"2",
        	"Id":0,
        	"FirstName":null,
        	"LastName":null,
        	"Email":null,
        	"EmailConfirmed":false,
        	"PasswordHash":null,
        	}
        }
    

    How to bind this object in knockout js. So far I have used somethind like this to bind property with input field.

        <input required class="form-control" data-bind="value: User.FirstName" type="text" />

    Functions to build model in knockout.

    function userModel() {
                var self = this;
                self.User = ko.observable();
            }
        
            function bindData(data) {
                userInfo.User(data["User"]);
            }
    

    When I call submiting via JS.

    var jsonData = ko.toJSON(userInfo);

    Object jsonData show that property like FirstName is null, however in formular value has been written.
    Object userInfo stores written values in formular, I have checked it.

    function userModel() {
                var self = this;
                self.Password = ko.observable();
                self.User = ko.observable();
            }
        
            function UserViewModel(user) {
                this.FirstName = ko.observable(user.FirstName);
                this.LastName = ko.observable(user.LastName);
                // other properties
            }
        
            function bindData(data) {
                userInfo.Password(data["Password"]);
                userInfo.User(new UserViewModel(data["User"]));
            }
        
        $(document).ready(function () {
                userInfo = new userModel();
                createUser();
                ko.applyBindings(userInfo);
            });

    In this solution the JSON result is the same.

    User":{"FirstName":null,"LastName":null}

    How to solve this?

    Monday, February 5, 2018 10:47 AM

All replies

  • User-166373564 posted

    Hi, 

    How about the code snippet below? 

    var data = {

      "User": {

        "$id": "2",

        "Id": 0,

        "FirstName": "Joseph",

        "LastName": "Campbell",

        "Email": null,

        "EmailConfirmed": false,

        "PasswordHash": null,

      }

    }

    function UserViewModel(user) {

      this.FirstName = ko.observable(user.FirstName);

      this.LastName = ko.observable(user.LastName);

      // other properties

    }

    function bindData(data) {

      userInfo.User(new UserViewModel(data["User"]));

    }

    function userModel() {

      var self = this;

      self.User = ko.observable();

    }

    var userInfo = new userModel();

    bindData(data);

    ko.applyBindings(userInfo);

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

    <form data-bind="with: User">

      <input type="text" data-bind="value: FirstName" />

      <input type="text" data-bind="value: LastName" />

    </form>

    Current values:

    <input type="text" readonly data-bind="value: User().FirstName" />

    <input type="text" readonly data-bind="value: User().LastName" />

    Regards,

    Angie 

    Thursday, February 22, 2018 7:30 AM