Derik Whittaker

Syndication

News


Knockout JS and mapping from Json to a custom object type

One of the really cool features of Knockout js is the ability to take a raw json object, say from a web endpoint, and map it to an observable.  This is done via the mapping plug-in.

Take a look at the code below for an example

The magic above is the line ko.mapping.fromJS(item), this is what will take my json object and convert it to an observable.  Proof is below.

Below is the output via the Chrome Dev tools of our ‘item’ prior to mapping.  Notice we have raw properties.

image

 

Here is the output after the mapping, notice how now we have functions rather than properties.  This tells me I have a knockout observable.

image

There is one little issue here in the mapping above.  The issue is that the resulting type from the mapping is ‘object’.  Now this could be 100% ok but what if you want to custom object type for your binding.  Maybe you have computed properties you want to use as well.  Fortunately you can accomplish this via Knockout as well.

Assume I have this custom type as seen below (this is using TypeScript

How could I use Knockout mapping to returned a typed observable?

Turns out it is really simple.  The code below shows how

The ONLY difference in this code is in the ko.mapping.fromJs line.  Notice how I am passing in 2 extra arguments.  The 2nd argument is the one I want and this is the ‘target’ output type.

Now when I look at the output in the debugging tools I get what I want, a typed object being returned

image

So the trick to returned a typed observable is to use the overload of the .fromJS method.

Till next time,


Posted 03-06-2013 5:28 AM by Derik Whittaker
Filed under: ,

[Advertisement]

Comments

buy social bookmarks wrote re: Knockout JS and mapping from Json to a custom object type
on 03-22-2013 2:53 PM

afJpTt Great blog.Really thank you! Fantastic.

Social bookmarks wrote re: Knockout JS and mapping from Json to a custom object type
on 03-23-2013 9:48 AM

jPgqor I cannot thank you enough for the blog article. Awesome.

buy social bookmarks wrote re: Knockout JS and mapping from Json to a custom object type
on 04-04-2013 1:44 AM

35oH9R Im obliged for the post.Thanks Again.

bears wrote re: Knockout JS and mapping from Json to a custom object type
on 04-06-2013 2:06 AM

Im thankful for the blog.Much thanks again. Keep writing.

nonsense wrote re: Knockout JS and mapping from Json to a custom object type
on 04-06-2013 3:49 PM

Very good blog article.Much thanks again. Awesome.

social bookmarking service wrote re: Knockout JS and mapping from Json to a custom object type
on 04-12-2013 5:47 AM

4jFmu0 Wow, great post.Thanks Again. Awesome.

Buy Facebook likes wrote re: Knockout JS and mapping from Json to a custom object type
on 04-15-2013 3:09 AM

Great blog post.Really looking forward to read more. Really Cool.

social bookmarking service wrote re: Knockout JS and mapping from Json to a custom object type
on 04-15-2013 7:29 PM

W9QjJH Really appreciate you sharing this blog article.Really looking forward to read more. Will read on...

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)