将JSON字符串放入Knockout可观察多选列表

我试图让我的JSON字符串通过ViewBag传入我的挖空观察器并使用它填充多选列表。我不确定我在做什么错误，但是现在它将JSON字符串中的每个单独字符都粘贴到选择列表中的它自己的行中。将JSON字符串放入Knockout可观察多选列表

这里是我的C＃控制器代码：

Dictionary<string, string> salesReps = new Dictionary<string, string>(); 
     foreach (var rep in salespeople.Salesperson) 
     { 
      salesReps.Add(rep.Code, rep.Code + " - " + rep.fullName); 
     } 
     //ViewBag.salespeople = salespeople.Salesperson.Select(x => x.Code).Distinct().ToList(); 
     ViewBag.salespeople = JsonConvert.SerializeObject(salesReps);

这里是淘汰赛代码：

var cSource = function (data) { 
     var self = this; 

     ..... 
     self.salesPeople = ko.observableArray(); 
}; 

$(document).ready(function() { 

     var modelData = @Html.Raw(Json.Encode(Model)); 

     mySource = new cSource(modelData); 

     //var salesRepList = Html.Raw(Json.Encode(ViewBag.salespeople)); 
     var salesRepList = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.salespeople)); 
     console.log(salesRepList); 

     mySource.salesPeople = salesRepList;

这里是HTML选择代码：

<select data-bind=" 
options: salesPeople, 
selectedOptions: chosenReps, 
optionsCaption: 'Choose rep(s)' 
"></select>

和一个小我的console.log吐出的片段：

{"USERNAME1":"USERNAME1 - Full Name 1","USERNAME2":"USERNAME2 - Full Name 2","USERNAME3":"USERNAME3 - Full Name 3",..... }

UPDATE

我改变了C＃代码在JSON立即创建命名变量。这是我的新的console.log输出：

{"username":"BOBC","fullname":"Bob Cottin"},{"username":"JIMT","fullname":"Jim Thorpe"},{"username":"LUKEP","fullname":"Luke Peppin"}, ....}

来源

2017-02-08 dmikester1

有一件事我立刻注意到的是，你似乎可以覆盖你的销售人员观察到与一个平坦的价值。 “mySource.salesPeople = salesRepList”应该可能是“mySource.salesPeople（salesRepList）” –

选项绑定期待对象或值的数组，但根据您的控制台日志的销售人员是一个字典风格的对象。您可能需要将其转换为数组，以便绑定知道如何将其解析为选择选项。

如果你只需要value属性，并且可以忽略“USERNAME1”，“用户名2”，等等，那么你可以使用这样的循环抓住对象的值属性：

for (var x in salesRepList) { 
    if (salesRepList.hasOwnProperty(x)) { 
     mySource.salesPeople.push(salesRepList[x]); 
    } 
}

如果您需要更复杂的类型，那么你将不得不创建一个对象数组，或者（根据你最后的编辑）让你的JSON传递它们的标准参数名称。然后，您可以使用knockout的optionsText绑定来告诉选择该对象上的哪个属性用作显示文本。

每例如：3的knockout docs

<select data-bind="options: availableCountries, 
        optionsText: 'countryName', 
        value: selectedCountry, 
        optionsCaption: 'Choose...'"></select>

这里有一个的jsfiddle有一些是适合你的例子：fiddle

来源

2017-02-08 18:56:52

我需要JSON字符串的两个部分。它有助于创建一个名为值的JSON字符串？ – dmikester1

对于选择列表，我希望该值为“USERNAME1”，文本为“USERNAME1 - 全名1”。 – dmikester1

我试着添加这个循环来代替'mySource.salesPeople（salesRepList）'，并且我继续得到了“警告：无响应的脚本”，能够继续，调试或停止。我已经打了好几次了，并且一直持续到来。我猜无限循环或非常非常长的循环。 – dmikester1

将JSON字符串放入Knockout可观察多选列表

回答

相关问题