arame3333
arame3333

Reputation: 10213

Convert JSON string from the server to an observable array

In my javascript;

var tenderStatusChoices = '@Html.Raw(Model.TenderStatusChoices)';

I get the following data;

var tenderStatusChoices = '
    [{
        "Disabled": false,
        "Group": null,
        "Selected": true,
        "Text": "Open",
        "Value": "Open"
    }, {
        "Disabled": false,
        "Group": null,
        "Selected": false,
        "Text": "Successful",
        "Value": "Successful"
    }, {
        "Disabled": false,
        "Group": null,
        "Selected": false,
        "Text": "Unsuccessful",
        "Value": "Unsuccessful"
    }]';

I cannot use this JSon to populate a combo box in knockout, when I do I get the following error;

"The argument passed when initializing an observable array must be an array, or null, or undefined."

So how do I convert this Json string to an array that ko will understand?

The code that populates the combo is as follows;

<select id="TenderStatus" data-bind="
    options: tenderStatusChoices,
    optionsText: 'Text',
    optionsValue: 'Value',
    value: status">
</select>

var temp = '@Html.Raw(Model.TenderStatusChoices)';
var tenderStatusChoices = JSON.stringify(eval("(" + temp + ")"));

var Tender = function () {
    this.tenderId = ko.observable("@Model.Tender.TenderId");
    this.title = ko.observable("@Html.Raw(Model.Tender.Title)");
    this.estimateNumber = ko.observable("@Model.Tender.EstimateNumber");
    this.status = ko.observable("@Model.Tender.Status");
    this.tenderStatusChoices = ko.observableArray(tenderStatusChoices);
};

ko.applyBindings(Tender);

Upvotes: 1

Views: 561

Answers (1)

Muhammad Raheel
Muhammad Raheel

Reputation: 19882

You need to use the mapping plugin or loop through your data manually.

this.tenderStatusChoices = ko.observableArray(JSON.parse(temp));

Or use mapping plugin

this.tenderStatusChoices = ko.observableArray(ko.mapping.toJS(temp));

Upvotes: 1

Related Questions