KnockoutJS - Observable Array of Observable objects with Data from SQL server

Question

I am working on a simple proof of concept for a web app

I would like to know how to achieve the above please.

I have a class of items I am retrieving in a API from SQL server. The simple structure of the Class is

 public partial class ReqsTest
{
    public string ID { get; set; }
    public string Requisition { get; set; }
    public Nullable<System.DateTime> DateReqnRaised { get; set; }
    public Nullable<decimal> ReqnValue { get; set; }
    public Nullable<decimal> ApprovedValue { get; set; }
    public decimal Line { get; set; }
    public long INDX { get; set; }
    public string ReqStatus { get; set; }
    public string ReqBackground { get; set; }
}

I am populating a Knockout Observable Array with the data return from the server

My View Model code is

var self = this;
self.reqs = ko.observableArray();
self.error = ko.observable();

var reqsUri = '/api/ReqsTests/';

function ajaxHelper(uri, method, data) {
    self.error(''); // Clear error message
    return $.ajax({
        type: method,
        url: uri,
        dataType: 'json',
        contentType: 'application/json',
        data: data ? JSON.stringify(data) : null
    }).fail(function (jqXHR, textStatus, errorThrown) {
        self.error(errorThrown);
    });
}

function getAllReqs() {
    ajaxHelper(reqsUri, 'GET').done(function (data) {
        self.reqs(data);
    });
}

The problem is that of course I now know the underlying object properties in the array are not observable as in this question here

I am trying to understand how to use this code here to bridge the gap but I do fully understand the calls

I believe I will need this sort of function to create the object with the Observable properties for updating later, such as something like this

function Item(ID, Requistion,DateReqnRaised,ReqnValue,ApprovedValue,Line,INDX,ReqStatus,ReqBackground) {
    //Not editable properties
    this.ID = ID; 
    this.Requistion = Requistion;//Not editable
    this.DateReqnRaised = DateReqnRaised;//Not editable
    this.ReqnValue = ReqnValue; //Not editable
    this.Line = Line;
    this.INDX = INDX;



    //editable later properties
    this.ApprovedValue = ko.observable(ApprovedValue); 
    this.ReqStatus = ko.observable(ReqStatus);
    this.ReqBackground = ko.observable(ReqBackground);

}

But that maybe not quite right yet and I believe I need to change the code here to but I am not certain how to call the item function with it. It feels like I need to loop through each return in data to call the function item to add it to the observable array but I am not certain yet.

function getAllReqs() {
    ajaxHelper(reqsUri, 'GET').done(function (data) {
        self.reqs(data);
    });
}

Can any one help please

****UPDATED CODE****

Index.cshtml code

 <div class="page-header">
    <h1>Chamberlin Requistions</h1>
</div>

<div class="row">

    <div class="col-xs-4">
        <div class="panel panel-default" >
            <div class="panel-heading">
                <h2 class="panel-title">Requistions</h2>
            </div>
            <div class="panel-body panel-info ">
                <ul class="list-unstyled" data-bind="foreach: Reqs">
                    <li>
                        <div  >
                            <strong>
                                <span data-bind="text: reqs().Requisition"></span>
                                : <span data-bind="text: reqs().Line"></span>
                            </strong>
                        </div>

                    </li>
                </ul>
            </div>
        </div>
        <div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div>
    </div> 
</div>

As requested the update code for the View model

function ReqsTest(rt) {
rt = rt || {};
var self = this;
self.id = ko.observable(rt.ID || 0);
self.requisition = ko.observable(rt.Requisition || "");
self.dateReqnRaised = ko.observable(rt.DateReqnRaised || null);
self.reqnValue = ko.observable(rt.ReqnValue || null);
self.approvedValue = ko.observable(rt.ApprovedValue || null);
self.line = ko.observable(rt.Line || 0.00);
self.indx = ko.observable(rt.INDX || 0);
self.reqStatus = ko.observable(rt.ReqStatus || "");
self.reqBackground = ko.observable(rt.ReqBackground || ""); }

function ReqsViewModel (){
var self = this;
self.Reqs = ko.observableArray([]);
self.error = ko.observable();

var reqsUri = '/api/ReqsTests/';

function ajaxHelper(uri, method, data) {
    self.error(''); // Clear error message
    return $.ajax({
        type: method,
        url: uri,
        dataType: 'json',
        contentType: 'application/json',
        data: data ? JSON.stringify(data) : null
    }).fail(function (jqXHR, textStatus, errorThrown) {
        self.error(errorThrown);
    });
}

function getAllReqs() {
    ajaxHelper(reqsUri, 'GET').done(function (data) {
        // Build the ReqsTest objects
        var reqs = ko.utils.arrayMap(data, function (rt) {
            return new ReqsTest(rt);
        });
        self.Reqs(reqs);
    });
}

// Load the reqs - Take this out if you don't want it
getAllReqs(); }

//Details
self.detail = ko.observable();

self.getReqDetail = function (item) {
    ajaxHelper(reqsUri + item.INDX, 'GET').done(function (data) {
        self.detail(data);
    });
}     
ko.applyBindings(new ReqsViewModel());

Thank you

Answer 1

First make a matching JavaScript function for your ReqsTest class.

function ReqsTest(rt) {
    rt = rt || {};
    var self = this;
    self.id = ko.observable(rt.ID || 0);
    self.requisition = ko.observable(rt.Requisition  || "");
    self.dateReqnRaised = ko.observable(rt.DateReqnRaised || null);
    self.reqnValue  = ko.observable(rt.ReqnValue  || null);
    self.approvedValue = ko.observable(rt.ApprovedValue || null);
    self.line = ko.observable(rt.Line || 0.00);
    self.indx = ko.observable(rt.INDX || 0);
    self.reqStatus = ko.observable(rt.ReqStatus || "");
    self.reqBackground = ko.observable(rt.ReqBackground  || "");
}

Then make a viewmodel to bind to the page.

function ReqsViewModel {
    var self = this;
    self.reqs = ko.observableArray([]);
    self.error = ko.observable();

    var reqsUri = '/api/ReqsTests/';

    function ajaxHelper(uri, method, data) {
        self.error(''); // Clear error message
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function (jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }

    function getAllReqs() {
        ajaxHelper(reqsUri, 'GET').done(function (data) {
            // Build the ReqsTest objects
            var reqs = ko.utils.arrayMap(data, function(rt) {
                return new ReqsTest(rt);
            });
            self.reqs(reqs);
        });
    }

    // Load the reqs - Take this out if you don't want it
    getAllReqs();
}

And bind the viewmodel to the page...

ko.applyBindings(new ReqsViewModel());

You now have an observable array of objects with observable properties.

I hand typed this code in so there may be a few syntax errors