My api endpoint is located at /api/pin and it returns JSON data in the following format:
{
"num_results": 4,
"objects": [
{
"id": 1,
"image": "http://placekitten.com/200/200/?image=9",
"title": "Test"
},
{
"id": 2,
"image": "http://placekitten.com/200/200/?image=9",
"title": "test"
},
{
"id": 3,
"image": "www.test.com",
"title": "test"
}
],
"page": 1,
"total_pages": 1
}
I am trying to populate a knockout observable array using this data and display it on my page. Here is my JavaScript file snippet:
define(['knockout', 'text!./pins.html'], function(ko, templateMarkup) {
function Pins(params) {
var self = this;
self.agents = ko.observableArray([]);
$.getJSON('/api/pin', function(data){
self.agents = ko.mapping.fromJS(data);
});
}
return { viewModel: Pins, template: templateMarkup };
});
Here is my HTML code:
<b data-bind="agents.num_results"> results </b>
<table>
<tbody data-bind="foreach: agents.objects">
<tr>
<td data-bind="text: image"></td>
<td data-bind="text: title"></td>
</tr>
</tbody>
</table>
Currently, I am only seeing the word "results" rendered on my page and nothing else. I have successfully created a view model that represents the JSON data and added it into the array during the getJSON call. However, I believe the purpose of the knockout mappings library is to handle this automatically without manual creation of view models. I seem to be missing something obvious here and struggling to identify the issue.