如何将 JSON 数组转换为 JavaScript 数组？答案

【问题标题】：How to convert JSON array to JavaScript Array?如何将 JSON 数组转换为 JavaScript 数组？
【发布时间】：2012-05-24 15:18:46
【问题描述】：

我正在使用 KnockoutJS 进行数据绑定。以下代码是控制器的动作方法

public JsonResult GetPeople()
{
    var people = new List<Person>
                     {
                         new Person {Name = "aaaa", Address = "aaaaaaaaa"},
                         new Person {Name = "bbbb", Address = "bbbbbbbbb"},
                         new Person {Name = "cccc", Address = "ccccccccc"}
                     };
    return Json(people, JsonRequestBehavior.AllowGet);
}

下面是客户端代码的sn-p

<ul data-bind="foreach: people">
  <li>NAME:<span data-bind="text: Name"></span></li>
  <li>ADDRESS:<span data-bind="text: Address"></span></li>  
</ul>

<script>
    function getPeopleFromServer() {
        var people= [];

        $.ajax({
            url: "GetPeople",
            cache: false,
            type: "GET",
            success: function (result) {
                console.log("result= " + result);
                people = $.parseJSON(result);
                console.log("people= " + people);
            }
        });

        return people;
    }

    function ViewModel() {
        var self = this;

        // data
        self.people = ko.observableArray(getPeopleFromServer());        
    }

    ko.applyBindings(new ViewModel());
</script>

问题在于 getPeopleFromServer 方法中的 people 变量始终为 null，而 result 具有来自服务器的正确值。我错过了什么吗？

【问题讨论】：

你从 console.log("result= " + result); 中得到了什么；
您是否检查过 jQuery 是否为您将结果解析为 JSON？你可能会放弃$.parseJSON 看看事情是否开始工作......
'success' 是一个内联异步函数。基本上，'return people' 发生在调用 'success' 函数之前，因为 ajax 调用是非阻塞的。您需要重新设计您的 ViewModel 以异步工作（或关闭异步），希望其他人会加入代码修复
我有这样的日志 "result= [object Object],[object Object],[object Object] people= null"
@Tom 关于重新设计视图模型，我想要的是将服务器调用方法与视图模型分开。你对此有什么想法吗？

标签： json knockout.js

【解决方案1】：

您的 $.ajax 函数完成时间比它的包含函数要长，因此包含函数在执行结束时永远不会弹出 people

您可以做的一件事是将以下内容添加到您的$.ajax：

$.ajax({
   async: false,
   url: "GetPeople",
   .....
});

async: false 将使包含函数“等待”直到 ajax 完成。您的人员变量应在函数执行结束时填充。虽然这是一个快速的胜利，但我同意 Tom 的观点，您应该重新考虑如何处理您的 ViewModel。

【讨论】：

谢谢你的回复Martin，我加了“async: false”，但是人还是空，结果不空。

【解决方案2】：

@tom 的评论是正确的。

'success' 是一个内联异步函数。基本上，'return people' 发生在调用 'success' 函数之前，因为 ajax 调用是非阻塞的。您需要重新设计您的 ViewModel 以异步工作（或关闭异步），希望其他人会加入代码修复

这是他预言的完整注释的小提琴。

http://jsfiddle.net/bczengel/8Wqum/

【讨论】：

【解决方案3】：

应该在同一视图模型中引用人员。或者作为self.people。我建议你把对 ajax 的调用放在视图模型中，然后就清楚了。所以 getPeopleFromServer() 应该在视图模型中。

感兴趣的也可以加 timeout: 600000 这样调用就不会超时。

【讨论】：

【解决方案4】：

尝试使用 ko.mapping 插件。

function ViewModelWrapper(jsonResult)
{
       var self = this;
       self.model = ko.mapping.fromJS(jsonResult);
}

http://knockoutjs.com/documentation/plugins-mapping.html

【讨论】：