Multi tool use

Clash Royale CLAN TAG

Knockout JS Fill table with Ajax Request

I am new to Knockout JS and I have been trying without success to fill a table with the result of an Ajax request. I have followed several tutorials and many a Stack Overflow questions but I am still not getting the results I need.

The error that I am getting right now is that my observable array is not defined. Here is my JS code:

function FeatureRequest(data) {

if(data != null){
// console.log("Feature Request");
// console.log(data);
this.title = ko.observable(data.title);
this.description = ko.observable(data.description);
this.client_id = ko.observable(data.client_id);
this.client_priority = ko.observable(data.client_priority);
this.product_area_id = ko.observable(data.product_area_id);
this.user_id = ko.observable(data.user_id);
this.target_date = ko.observable(data.target_date);
this.ticket_url = ko.observable(data.ticket_url);
this.date_finished = ko.observable(data.date_finished);
}
}

function FeatureRequestViewModel() {
// Data
var self = this;
self.features = ko.observableArray();

console.log("Sending requests...");
$.getJSON("/api/obscure/request", function(response) {
var mappedFeatures = $.map(response, function(item) {
return new FeatureRequest(item)
});
self.features(mappedFeatures);

});

}

ko.cleanNode($("body")[0]);
var viewModel = new FeatureRequestViewModel();
ko.applyBindings(viewModel);


The variable that is "undefined" is the self.features observable array.

Here is my HTML table I want to fill:

<tbody id="featuresTable" data-bind="foreach:features">
<tr>
<td data-bind="text: features.title"> </td>
<td data-bind="text: features.description"> </td>
<td data-bind="text: features.client_id"> </td>
<td data-bind="text: features.client_priority"> </td>
<td data-bind="text: features.product_area_id"> </td>
<td data-bind="text: features.target_date"> </td>
<td data-bind="text: features.ticket_url"> </td>
<td data-bind="text: features.user_id"> </td>
<td class="single line">
<a class="edit ui icon violet button" value="features.id">
<i class="edit icon"> </i>
</a>
<a class="finish ui icon green button" value="features.id">
<i class="check icon"> </i>
</a>
<a class="delete ui icon red button" value="features.id">
<i class="delete icon"> </i>
</a>
</td>
</tr>
</tbody>


2 Answers
2

Within foreach: features, the binding data for the inner HTML is an element of the features array.

foreach: features

features

Fix your code by removing the features. prefix from your table cells.

features.

In foreach: features dont use features.[property] but only [property].

<tbody id="featuresTable" data-bind="foreach:features">
<tr>
<td data-bind="text: title"> </td>
<td data-bind="text: description"> </td>
<td data-bind="text: client_id"> </td>
<td data-bind="text: client_priority"> </td>
<td data-bind="text: product_area_id"> </td>
<td data-bind="text: target_date"> </td>
<td data-bind="text: ticket_url"> </td>
<td data-bind="text: user_id"> </td>
<td class="single line">
<a class="edit ui icon violet button" value="id">
<i class="edit icon"> </i>
</a>
<a class="finish ui icon green button" value="id">
<i class="check icon"> </i>
</a>
<a class="delete ui icon red button" value=".id">
<i class="delete icon"> </i>
</a>
</td>
</tr>
</tbody>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.