binding data from JSON object with knockoutjs - Asp.net MVC

Question

I have a problem to get data from returning JSON in case of nested JSON objects.

HTML code looks like:

<div>
    <h2>List Employee</h2>
    <br />
    <table class="table table-bordered" >
        <thead>
            <tr>
                <td>Id</td>
                <td>Name</td>
                <td>Age</td>
            </tr>
        </thead>
        <tbody data-bind="foreach: Employees">
            <tr>
                <td data-bind="text: Id"></td>
                <td data-bind="text: Name"></td>
                <td data-bind="text: Age"></td>
            </tr>
        </tbody>
    </table>
</div>

then KnockoutJS

function ProductViewModel() {
    var self = this;
    self.Employees = ko.observableArray();`

    $.ajax({
        url: '/Home/GetEmployee',
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        data: {},
        success: function (data) {
            self.Employees(ko.mapping.fromJS(data));
        }
    })
} 
var viewModel = new ProductViewModel();
ko.applyBindings(viewModel);`

Controller:

public JsonResult GetEmployee()
{
    var employee = db.Employee.ToList();
    return Json(new { data = employee }, JsonRequestBehavior.AllowGet);
}

Json Object:

`{"data":[{"Id":1,"Name":"Andrew","Age":25},{"Id":2,"Name":"John","Age":28},{"Id":3,"Name":"Layla","Age":24},{"Id":4,"Name":"Mia","Age":26}]}`

Result Error:

Anybody can improve my Code, please...

@Phong, thanks for edited.

Roberts
– Roberts

2020-01-20 03:18:47 +00:00
Commented Jan 20, 2020 at 3:18 — Roberts
– Roberts, Commented Jan 20, 2020 at 3:18

Gawel1908 · Accepted Answer · 2020-01-20 09:52:26Z

0

Your data is in object so you have to parse it:

const myData = JSON.parse(data);
self.Employees(ko.mapping.fromJS(myData.data)); //in data is your array

If you need data only for display you can do it without mapping: self.Employees(myData.data);

answered Jan 20, 2020 at 9:52

Gawel1908

1481 silver badge10 bronze badges

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

Collectives™ on Stack Overflow

binding data from JSON object with knockoutjs - Asp.net MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related