knockout.mapping to access an array inside json

Question

This is my example below. I'am using knockout.mapping plugin in my project.

I want to fill the "from" element inside mails array to My Un Ordered list :

In the commented code I add the data that retrived form the database by using jquery ajax.

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/knockout-2.0.0.debug.js" type="text/javascript"></script>
    <script src="js/KnockoutMapping2.1.1.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            var viewModel = {};

            $.ajax({
                url: "Service.aspx",
                type: 'POST',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    //data :
                    //       {
                    //   "id":"Inbox",
                    //   "mails":[
                    //      {
                    //         "id":"1",
                    //         "from":"Abbot ",
                    //         "to":"steve@example.com",
                    //         "date":"May 25, 2011",
                    //         "subject":"Booking confirmation #389629244",
                    //         "folder":"Inbox"
                    //      }
                    //   ]
                    //}
                    viewModel = ko.mapping.fromJS(data);

                    ko.applyBindings(viewModel);
                },
                error: function (request) {
                    alert(request.responseText);
                }
            });




        });
    </script>
</head>
<body>
    your id is : <span data-bind='text: id' />
    <ul data-bind="foreach : mails">
        <li data-bind="value:from"></li>
    </ul>
</body>
</html>

Any help who to bind mails to my list.

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

http://jsfiddle.net/nickolsky/EVaPL/

your id is : <span data-bind='text: id' ></span>
    <ul data-bind="foreach : mails">
        <li data-bind="text:from"></li>

Do not self-close span ( Can a span be closed using <span />? )
Use text binding instead of value binding for li

edited May 23 '17 at 12:03

Community

1
1

answered Apr 17 '12 at 14:28

Artem

3,700
1
27
35

Self closing tags has bit me before as well. Apparently html != xml – Jason More Apr 17 '12 at 17:00

Ryan Fiorini · Answer 2 · 2012-04-17T15:01:35.600

0

http://jsfiddle.net/ryanwfiorini/DmWYS/

I put together a fiddle for you to see how I prefer to do it. I like to create a class to hold my data in thus allowing for more control over it. You can them include functions to concatenate and such.

Hope this helps.

edited Apr 17 '12 at 15:01

answered Apr 17 '12 at 14:53

Ryan Fiorini

800
5
9

knockout.mapping to access an array inside json

2 Answers2