如何将 json 字符串转换为 ko.observableArray([])，他们得到一个错误数据未定义？

Posted 2023-03-27

【中文标题】如何将 json 字符串转换为 ko.observableArray([])，他们得到一个错误数据未定义？

【英文标题】：How to convert json string to ko.observableArray([]), they get an error data is not defined?

【发布时间】：2019-02-26 14:38:51

【问题描述】：

我是淘汰 js 的新手，我使用淘汰框架和 ajax 调用创建了一个数据显示表。我有问题，可观察数组不应该获取值并显示在表中。 我的代码是：

$(function() 

var RacerModel = function()    
    self.Categories = ko.observableArray([]);
    self.Message = ko.observable("Data don't loaded");
    self.GetCategories = function () 
        $.ajax(
            url: "data1.json",
            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));

;

ko.applyBindings(RacerModel());

);

JSON 文件是：

"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"]

问题是 self.Categories = ko.observableArray([]);不要绑定值。它总是空的，并且得到了数据未定义之类的错误。如何通过 json 方法获取 ko.observableArray([]) 有值。

我的示例 html 代码是：

<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>
    </tr>
</tbody>

【参考方案1】：

这将是使用映射功能的正确方法：

ko.mapping.fromJS(data.categories,, self.Categories);

看看为什么超过here。

var RacerModel = function()    
    self.Categories = ko.observableArray([]);
    self.Message = ko.observable("Data don't loaded");
    self.GetCategories = function () 
        //$.ajax(
        //    url: "data1.json",
        //    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);
        //);
        ko.mapping.fromJS(data.categories,, self.Categories);
        
    
    var 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"];

;

ko.applyBindings(RacerModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<!-- ko if: Categories().length > 0 -->
<table>
<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>
  </tr>
</tbody>
</table>
<!-- /ko -->

<button data-bind="click: GetCategories">Get data</button>

【讨论】：

谢谢，它工作正常。我想通过ajax调用来调用数据值。是否可以在淘汰映射中调用ajax函数..