CODEWITHSUNDEEP
javascriptajaxknockout.jsknockout-3.0
suecarmol
suecarmol

Reputation: 467

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>

Upvotes: 1

Views: 776

Answers (2)

Matus Jurika
Matus Jurika

Reputation: 305

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>

Upvotes: 2

user3297291
user3297291

Reputation: 23382

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

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

Upvotes: 2

Related Questions