KnockoutJS and binding data from JSON object

Question

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

HTML code looks like:

<table>   
<thead>
    <tr>
        <th>Name</th>
        <th>DOB</th>
        <th>Gender</th>
        <th>Address</th>
        <th>URL</th>
    </tr>
</thead>
   <tbody data-bind="foreach: rows">
    <tr>
        <td data-bind="text: resource.name[0].text"></td>
        <td data-bind="text: dob"></td>
        <td data-bind="text: gender"></td>
        <td data-bind="text: address"></td>
        <td data-bind="text: fullUrl"></td>
    </tr>
</tbody>
</table>

then KnockoutJS

   function PatientsViewModel() {
      var self = this;

      self.rows= ko.observableArray([]);
      self.resources = ko.observableArray([]);
      self.name = ko.observableArray([]);
      self.text = ko.observable("");
      self.dob = ko.observable("");
      self.gender = ko.observable("");
      self.address = ko.observable("");
      self.fullUrl = ko.observable("");

        $.getJSON(
            "/proxy.php",
            {
                last: "john",
                first: "smith",
                dob: 19700101

            },
            function (data) {
                console.log(JSON.stringify(data.entry));
                self.rows(data.entry);
            }
        );

    }

    ko.applyBindings(new PatientsViewModel());

and JSON response structure looks like:

[
   {
      "fullUrl":"https://www.example.com/Patient/123",
      "resource":{
         "resourceType":"Patient",
         "id":"123",
         "identifier":[
            {
               "use":"official",
               "type":{
                  "coding":[
                     {
                        "system":"http://hl7.org/fhir/v2/0203",
                        "code":"MR",
                        "display":"test data"
                     }
                  ],
                  "text":"test"
               },
               "system":"1.2.3.4.5",
               "value":"123",
               "assigner":{
                  "display":"PatientId"
               }
            }
         ],
         "active":true,
         "name":[
            {
               "use":"usual",
               "text":"John Smith",
               "family":[
                  "Smith"
               ],
               "given":[
                  "John"
               ]
            }
         ],
         "gender":"Male",
         "birthDate":"1970-01-01",
         "address":[
            {
               "use":"home",
               "type":"both",
               "line":[
                  ""
               ],
               "city":"",
               "state":"",
               "postalCode":"",
               "country":""
            }
         ]
      },
      "search":{
         "mode":"match",
         "score":0
      }
   }
]

and when I try to bind data from JSON response work fine only for fullUrl can't get anything like resource.name[0].text, resource.birthDate etc

Any tips what I have missed?

score 0 · Answer 1 · edited May 23 '17 at 11:54

0

Just add some breakpoints, I'm sure you do KO binding before getting data with getJSON (see: getJSON does not honor async:false).

Another issue might be that the data you get is JSON, and aren't observables, but you can help on that easily: var koViewModel = ko.mapping.fromJS(uiModel); But you'll need this JS lib too: knockout.mapping.js

edited May 23 '17 at 11:54

Community

1
1

answered May 11 '17 at 16:49

baHI

1,510
15
20

Should `rows` in my case be observable or just to declare as `rows : data.entry`? – JackTheKnife May 11 '17 at 18:28
1

it depends, if you need to track and do two way binding on their content or the count, or if you plan to add items to that array manually, then i'd have them as an observable. anyhow the knockout.mapping.js will do the job for you :D for array manipulation check out this: http://stackoverflow.com/questions/43920118/knockout-js-add-new-item-to-an-array/43922961#43922961 – baHI May 11 '17 at 18:32

KnockoutJS and binding data from JSON object

1 Answers1