Как преобразовать строку json в ko.observableArray ([]), массив объектов?

Question

У меня есть ViewModel работает с каркасом нокаута и ajax. Я могу сохранить новые элементы в базе данных с помощью ajax.Save, но у меня проблема, когда я хочу получить сохраненные данные. Вот коды.

кода в ViewModel:

self.Categories = ko.observableArray([]); 
self.Message = ko.observable(""); 
elf.GetCategories = function() { 
    $.ajax({ 
     url: "/Admin/Categories", 
     cache: false, 
     type: "GET", 
     datatype: "json", 
     contenttype: "application/json;utf8" 
    }).done(function (data) { 
     self.Categories(ko.mapping.fromJS(data)); 
    }).error(function (err) { 
     self.Message("Error! " + err.status); 
    }); 
} 

console.log(JSON.stringify(data)); возвращается:

{"categories":[{"Id":1,"Name":"Learning","UrlSlug":"0-learning","Description":"learning"}, 
{"Id":2,"Name":"Topics","UrlSlug":"0-topics","Description":"posts"}, 
{"Id":3,"Name":"Shares","UrlSlug":"category-shares","Description":"shares"}, 
{"Id":4,"Name":"Projects","UrlSlug":"category-projects","Description":"project"}]} 

кода в контроллере:

[HttpGet] 
public ContentResult Categories() 
{ 
    var categories = _weblogServices.Categories(); 
    return Content(JsonConvert.SerializeObject(new {categories}), "application/json;utf8"); 
} 

и проблема заключается в self.Categories = ko.observableArray([]); всегда пусто без каких-либо данных. Я также попробовал эти пункты тоже, но ничего не изменилось:

ko.mapping.fromJS(data, self.Categories); 
self.Categories(ko.mapping.fromJS(data)); 
self.Categories(ko.mapping.fromJSON(data)); 
ko.mapping.fromJS(data, {}, self.Categories); 

У меня есть простая таблица в виде:

<table id="tblCategory" class="table table-striped table-bordered 
    table-responsive table-condensed table-hover"> 
<thead> 
    <tr> 
    <th class="text-center">Name</th> 
    <th class="text-center">Url Slug</th> 
    <th class="text-center">Description</th> 
    </tr> 
</thead> 
<tbody data-bind="foreach: Categories"> 
    <tr> 
    <td><span data-bind="text: Name"></span></td> 
    <td><span data-bind="text: UrlSlug"></span></td> 
    <td><span data-bind="text: Description"></span></td> 
    <td><button type="button" class="btn glyphicon glyphicon-pencil" 
     title="Edit" data-bind="click:$data.GetSelected"></button></td> 
    <td><button type="button" class="btn glyphicon glyphicon-trash" 
     title="Delete" data-bind="click:$data.DeleteSelectedCategory">/button></td> 
    </tr> 
</tbody> 
</table> 

Итак, вопрос в том, как можно преобразовать данные в формате JSON в observableArray ([]) ?

UPDATE: Отладчик Chrome говорит: данные и категории недоступны.

Answer 1

Вам не нужно использовать mapping.

В вашем АЯКС вызова .done, вы просто должны это сделать:

self.categories(data.categories); 

В качестве наблюдаемого массива, categories ожидать массив в качестве параметра. И по результату console.log(JSON.stringify(data)) находится: {"categories":[{...}, {...}, ...], массив находится на categories собственности полученного data.

Вам не нужно использовать сопоставление, потому что вам просто нужно показать объекты внутри массива, и вы не хотите редактировать их свойства. Таким образом, они могут быть оставлены как обычные объекты JavaScript, без видимых свойств.