convert json string into knockout observable array

Question

I am trying to convert a JSON string into a knockout.js observable array.

Here is my js code:

$(document).ready(function(e){
    var model =  function(dat){
        this.tabledata = ko.observableArray(dat);
    };

    $.ajax({
        url: 'http://localhost:1141/rest_service/show_data',
        type: 'GET',
        success: function(msg){
            // var dat = JSON.parse(msg);

            alert(msg);
            ko.applyBindings(new model(msg));
        },
        error: function(msg){
            alert(JSON.stringify(msg));
        },
    });
});

and here is my html:

<table id = "example" >
    <thead>
        <tr>
            <th>Employee ID</th>
            <th>Employee Name</th>
            <th>Employee Status</th>
            <th>Date of birth</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody data-bind='foreach: tabledata'>
       <tr>
           <td data-bind='text: $parent.empId'/></td> 
            <td data-bind='text: $parent.empStatus'/></td>
            <td data-bind='text:$parent.dob'/></td>
            <td data-bind='text: $parent.empName'/></td>
            <td data-bind='text: $parent.age'/></td>
        </tr>
    </tbody>
</table>

So here, after an ajax call, I am getting a JSON string as a response from the server and I want to bind this data to html table.

I tried using ko.mapping.fromJs() to convert the incoming JSON to an observable array but received the following error:

Error: The argument passed when initializing an observable array must be an array, or null, or undefined.

The JSON response is as follows:

[
 {"empId":100,"empName":"TA","empStatus":"yes","dob":"2000-12-12","age":15},   
 {"empId":101,"empName":"TA","empStatus":"yes","dob":"2000-12-12","age":15},
 {"empId":102,"empName":"TATA","empStatus":"yes","dob":"1997-12-12","age":18},
 {"empId":103,"empName":"kljh","empStatus":"yes","dob":"2000-12-12","age":15},
 {"empId":111,"empName":"Aria","empStatus":"No","dob":"1995-10-17","age":20}
]

How can I change my code so that the JSON string is converted properly into a Knockout.js observable array?

simple do this.tabledata([ko.mapping.fromJs(msg)()]) . let me know — super cool
– super cool, Commented Jul 15, 2015 at 6:16
if you can share your json structure it will be useful further down . — super cool
– super cool, Commented Jul 15, 2015 at 6:18
hey @super cool thanx for reply :) I tried ur given solution but still its nt working for me. I hav shared json structure in my above post. I tried ur solution n tried to see what data get stored in tabledata using alert. It shows function function d(){if(0<arguments.length)return d.Wa(c,arguments[0])&&(d.X(),c=arguments[0],d.W()),this;a.k.Ob(d);return c}.. — Priyanka Mokashi
– Priyanka Mokashi, Commented Jul 15, 2015 at 6:37
Try using $.getJSON instead. Take a look at the following tutorial — Wayne Ellery
– Wayne Ellery, Commented Jul 15, 2015 at 6:41
check here in fiddle sample jsfiddle.net/LkqTU/25299 & check console window for output .As far your structure goes use $data instead of $parent in view . — super cool
– super cool, Commented Jul 15, 2015 at 6:59

super cool · Accepted Answer · 2015-12-13 05:14:22Z

2

Do something like below

var json = [{"empId":100,"empName":"TA","empStatus":"yes","dob":"2000-12-12","age":15},{"empId":101,"empName":"TA","empStatus":"yes","dob":"2000-12-12","age":15},{"empId":102,"empName":"TATA","empStatus":"yes","dob":"1997-12-12","age":18},{"empId":103,"empName":"kljh","empStatus":"yes","dob":"2000-12-12","age":15},{"empId":111,"empName":"Aria","empStatus":"No","dob":"1995-10-17","age":20}]

var ViewModel = function() {
    this.list = ko.observable(ko.mapping.fromJS(json)());
        console.log(this.list());
};
ko.applyBindings(new ViewModel());

In view use $data instead of $parent as per your view structure .

working sample fiddle here

edited Dec 13, 2015 at 5:14

answered Jul 15, 2015 at 9:00

super cool

6,0653 gold badges34 silver badges67 bronze badges

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

2 Comments

Software Engineer Over a year ago

i try it but it's not working. it will display blank row.if any other method. let me know

super cool Over a year ago

@PHPDeveloper updated the fiddle in my answer . it looks fine . cheers

Collectives™ on Stack Overflow

convert json string into knockout observable array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related