Convert javascript array to ko.observablearray and bind to template

Question

I want to convert a javascript array that is in data.js file to ko.observable array and bind it to list tag

HTML

<script type="text/html" id="profileListTemplate">
        <li>
            <strong data-bind="text: name"></strong>            
        </li>
    </script>

   <h1>Profile Viewer</h1>

    <div class="tabbable tabs-left" id="profilesTabViewer">
        <ul class="nav nav-tabs" id="profileTab" data-bind="template: { name: 'profileListTemplate'}">
        </ul>
        <div class="tab-content" id="profileContent">
        </div>
    </div>`

data.js

    var data = [
    {
     'id': '1',
     'firstName': 'Megan',
     'lastName': 'Fox',
     'picture': 'images/01.jpg',
     'bio': 'Megan Denise Fox was born May 16, 1986 in Rockwood, Tennessee. ... 
    },
    ....
    ];

Simon LeVasseur · Accepted Answer · 2014-03-03 05:58:18Z

6

Plain and simple:

var myObservableArray = ko.observableArray(data);

Here is your updated JSFiddle: http://jsfiddle.net/simonlevasseur/qr7PL/

Note that in your template, you shouldn't put: people.firstName It should just be firstName as explained here: http://knockoutjs.com/documentation/foreach-binding.html

answered Mar 3, 2014 at 5:58

Simon LeVasseur

4223 silver badges9 bronze badges

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

1 Comment

Vimal Over a year ago

Thanks Simon. When I try to bind the values still I'm facing issues not sure what am I doing wrong. I'm new to knockout your comments would be of great value to me. It would be nice if you could send me a working example based on this scenario jsfiddle.net/du3QX

score 2 · Accepted Answer · 2014-03-02 21:41:54Z

2

Why not simply this:

var list = ko.observableArray(data);

I use this approach when building an underlying array. I then push the underlying all at once. Another construct might be:

var list = ko.observableArray([]);
list.push(data);

But, you may need to make each property observable, in which case you could use the Knockout mapping plugin as gaurav suggests, or you could simply write your own mapper. A good example of how to do that can be found in John Papa's course from Pluralsight: Single Page Apps with HTML5, Web API, Knockout and jQuery.

edited Mar 2, 2014 at 21:41

answered Mar 2, 2014 at 20:24

user3174746

2 Comments

Vimal Over a year ago

Thanks for your feed backs Eric. When I try to bind the values still I'm facing issues not sure what am I doing wrong. I'm new to knockout your comments would be of great value to me. It would be nice if you could send me a working example based on this scenario jsfiddle.net/du3QX

user3174746 Over a year ago

@Vimal I updated your fiddle, but I eliminated the template binding just to show you that fromJSON() isn't necessary. Otherwise, Simon LeVasseur's fiddle is working fine. If you're still having trouble, please post a fuller example of your code.

Gaurav · Accepted Answer · 2014-03-02 21:06:40Z

0

You can use fromJSON function of knockout which will convert JSON string to object. In your scenario you can do something like:

//converting your json string to array of objects
var list = ko.fromJSON(data); 

//creating observable array from array of objects.
var observableList = ko.observableArray(list);

You should check knockout mapping plugin also.

edited Mar 2, 2014 at 21:06

user3174746

answered Mar 2, 2014 at 16:31

Gaurav

8,49714 gold badges57 silver badges91 bronze badges

1 Comment

Vimal Over a year ago

Thanks for your feed backs Gaurav. When I try to bind the values still I'm facing issues not sure what am I doing wrong. I'm new to knockout your comments would be of great value to me. It would be nice if you could send me a working example based on this scenario jsfiddle.net/du3QX

Collectives™ on Stack Overflow

Convert javascript array to ko.observablearray and bind to template

data.js

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

data.js

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related