KO：解析 JSON 时出错答案

【问题标题】：KO: Error when parsing JSONKO：解析 JSON 时出错
【发布时间】：2017-05-04 22:58:08
【问题描述】：

创建了一个演示问题的 JSBin：http://jsbin.com/kukehoj/1/edit?html,js,console,output

我正在创建我的第一个基于 REST 的网站。后端使用 Python（Django REST 框架），似乎工作正常。我试图让前端获得帖子的 cmets，但它不起作用。

HTML 导入

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>

scripts.js

function Comment(data) {
    this.body = ko.observable(data.responseText)
}

function Post(data) {
    this.title = ko.observable(data.title)
    this.body = ko.observable(data.body)

    var self = this;
    self.comments = ko.observableArray([])  

    self.comments(($.map(data.comments, function(link) { // Map the data from
        return $.getJSON(link, function(data) { return new Comment(data)}) //These requests
    })))
}


function PostViewModel() {
    // Data
    var self = this;
    self.posts = ko.observableArray([])  

    // Get the posts and map them to a mappedData array. 

    $.getJSON("/router/post/?format=json", function(allData) {
        var mappedData = $.map(allData, function(data) { return new Post(data)})
        self.posts(mappedData)
    })
}


ko.applyBindings(new PostViewModel());

服务器数据：

[{  "title":"-->Title here<--",
    "body":"-->Body here<--",
    "comments":[
        "http://127.0.0.1:8000/router/comment/6/?format=json",
        "http://127.0.0.1:8000/router/comment/7/?format=json",
        "http://127.0.0.1:8000/router/comment/8/?format=json",
        "http://127.0.0.1:8000/router/comment/9/?format=json"]
}]

每个链接指向的位置：

{"body":"-->Body here<--"}

index.html

<div class="col-lg-7" data-bind="foreach: { data: posts, as: 'posts' }">

    <h3 data-bind="text: title"></h3> 
    <p data-bind="text: body"> </p>

    <span data-bind="foreach: { data: comments(), as: 'comments' }"> 
         <p data-bind="text: comments.body"></p>
    </span>

</div>

（还有很多HTML，但我删除了不相关的部分）

一切正常，除了 cmets 似乎格式错误。

chrome 控制台显示绑定到每个评论对象值的 JSON“responseText”。

Wrong format

如果这是一个愚蠢的问题，我很抱歉，但我已经尝试了所有方法 - 但它不起作用。（我是菜鸟）

【问题讨论】：

错误的格式是什么样的？
添加了截图

标签： python json django rest knockout.js

【解决方案1】：

您提供的示例代码没有任何问题，除了您拥有的部分 this.body = ko.observable(data.responseText) 而您的数据在您的示例 commentData 对象中不包含 responseText 。如果你用var commentData = {"responseText":"-->Body here<--"} 替换commentData 对象，它就可以工作。

注意：这部分

 <span data-bind="foreach: { data: comments(), as: 'comments' }"> 
         <p data-bind="text: comments.body"></p> // comments.body => body
    </span>

你的问题是错误的，但你的示例代码是正确的。应该是

 <span data-bind="foreach: { data: comments(), as: 'comments' }"> 
         <p data-bind="text: body"></p>
    </span>

这是您的示例的工作版本：https://jsfiddle.net/rnhkv840/26/

【讨论】：

【解决方案2】：

我假设您使用的是 Django Rest Framework，因此您为帖子获取的 JSON 结构是由您的序列化程序根据您的模型字段自动完成的。

回到前端，我之前没有使用过knockout js，但你需要的是使用另一个控制器加载cmets。您可以使用主要资源提供的链接一一完成（这有时会导致大量查询），或者您在 cmets 端点上创建一个过滤器，允许您检索特定帖子的 cmets。

【讨论】：

是的，我想我可以尝试在后端进行。所以你的建议是创建一个新的序列化器来处理它？
您不需要另一个序列化程序，您可能已经为您的 cmets 准备了一个。您需要的是扩展您的 cmets 的列表视图。
你必须添加一个filter_class：django-rest-framework.org/api-guide/filtering/…你也可以看看ProductFilter过滤器看看如何实现它。

【解决方案3】：

是否考虑过使用 django REST 框架？它可以帮助您使用简单的视图集序列化所有模型。查看docs.

【讨论】：

【解决方案4】：

所以发现了实际问题。 JavaScript 从服务器读取数据的方式，说明由于 cmets 只有一个值，因此评论的 data 属性是存储评论正文的变量。不是 data.body。

【讨论】：