Bind complex JSON object using knockout.js

Question

I'm brand new to using Knockout.js and have just installed/instantiated a ViewModel binding using ko.mapping.js only to find that I get a partial binding.

Using the example code listed below we see that the binding works for the simple data but not the complex data in the JSON object. Here's a Fiddle

Complex JSON object:

 var json = {
    "a": "A",
    "b": [{
           "b1": "B1",
           "b2": "B2",
           "b3": [{ "one": "One", "two": "Two"}]
         }],
    "c": "C"
 }

HTML Elements to bind to:

<div data-bind="text: a"></div>
<div data-bind="text: b.b1"></div>
<div data-bind="text: c"></div>

Javascript ViewModel/binding:

var vm = {};    
vm = ko.mapping.fromJS(json);
ko.applyBindings(vm);

Have I missed something?

In Knockout.js, is it possible to bind a complex JSON object to a viewmodel using knockout.mapping.js?

If not, using this example ...how can we bind this complex JSON object using knockout.js?

The closest existing StackOverflow post I've been able to find is this one, Knockout mapping complex object and I've tried for hours now utilizing multiple approaches and have been unsuccessful in being able to you the ko.mapping.js to do this binding.

And unfortunately the Knockoutjs.com documentation (http://knockoutjs.com/documentation/plugins-mapping.html) doesn't cover whether or not this is even possible with the plugin.

Akhlesh · Accepted Answer · 2014-08-03 03:59:20Z

2

ko.mapping.js handles simple as well as complex object implicitly. Actually there is problem in binding which is used to access nested object.

As you see property b is an array so ko.mapping will convert it into observableArray.so binding will be like this :-

<div data-bind="text: a"></div>
<div data-bind="text: b()[0].b1"></div> //As b is array
<div data-bind="text: c"></div>

Below you can see the object after mapping.

{
"a": "A",
"b": [
    {
        "b1": "B1",
        "b2": "B2",
        "b3": [
            {
                "one": "One",
                "two": "Two"
            }
        ]
    }
],
"c": "C",
"__ko_mapping__": {
    "ignore": [],
    "include": [
        "_destroy"
    ],
    "copy": [],
    "observe": [],
    "mappedProperties": {
        "a": true,
        "b[0].b1": true,
        "b[0].b2": true,
        "b[0].b3[0].one": true,
        "b[0].b3[0].two": true,
        "b[0].b3": true,
        "b": true,
        "c": true
    },
    "copiedProperties": {}
}
}

Fiddle Demo

answered Aug 3, 2014 at 3:59

Akhlesh

2,3991 gold badge16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

id.ot Over a year ago

The visualization of the mapping is very helpful as well.

Collectives™ on Stack Overflow

Bind complex JSON object using knockout.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related