如何使用KO显示来自嵌套数组的下拉值

我有一个这样的数组 - 注意“Options”数组不包含[];这是一个正在被通过MVC服务器返回的数据 - 原来我得到这个数组像下面的注释代码：如何使用KO显示来自嵌套数组的下拉值

//var initialData = @Html.Raw(Json.Encode(Model.FieldList));): 

var initialData = [{ "DisplayName": "Service Status", 
"Options": { "123": "Active", "127": "Scrapped", "121": "Inactive" }, 
"Value": "123" 
     }];

我希望把选项的值与标签下拉“活动”，“废弃“，”无效“，每个映射到数组选项中列出的相应数值。

我想在该下拉列表中预先选择对应于123的值“活动”。我的下拉列表的标签为“服务状态”。

这是我到目前为止的代码。但它只显示我的服务状态下拉列表中有1个元素，即Active。我如何将其他2个元素添加到下拉菜单中？

如果你能帮助我，我会非常感激。谢谢！

<script type="text/javascript"> 
    var viewModel; 
    $(document).ready(function() { 
      var initialData = [{ "DisplayName": "Service Status", 
        "Options": { "123": "Active", "127": "Scrapped", "121": "Inactive" }, 
        "Value": "123" 
      }]; 
     viewModel = { fields: ko.observableArray(initialData) }; 
     ko.applyBindings(viewModel); 
    }); 
</script> 

<span data-bind="foreach: viewModel.fields"> 
<span data-bind="text:DisplayName"></span> 
<select data-bind="options: Options,         
         optionsValue: Value"></select> 
</span>

来源

2013-03-15 user2174775

您会想要将包含您的值的对象映射到可以使用选项绑定的数组中。

喜欢的东西：

var optionsFromServer = data[0].Options, 
    options = []; 

for (var prop in optionsFromServer) { 
    if (optionsFromServer.hasOwnProperty(prop)) { 
     options.push({ id: prop, text: optionsFromServer[prop] }); 
    } 
}

然后，您可以绑定反对这个新阵类似的选项：

<select data-bind="options: options, optionsValue: 'id', optionsText: 'text'"></select>

来源

2013-03-15 16:55:25

感谢您的答复。 – user2174775 2013-03-15 21:08:34

感谢您的回复。但我是新来的。如果你能帮助我更多，我会很感激。如果我理解你在这里提出的建议，是否必须为选项中的每个项目定义标签，对吗？例如在项目（“123”：“活动”）中，'id'= 123和'text'=活动，是否正确？这样我可以在html中使用这些标签并根据需要显示它们。我是新来的，我不知道我应该在哪里定义你在我的文件中发布的代码。你能帮助我多一点，并/或指导我在哪里阅读/查看获得更多关于解析嵌套数组的信息？ – user2174775 2013-03-15 21:18:44

另外，请注意，为了简单起见，我只列出了一个包含选项的项目;数据中有更多项目（它是一个数组），它们不包含选项，并且可以显示不同的字段。那是。说[0]不是一个选项，因为我必须遍历一个数组。 – user2174775 2013-03-15 21:20:40

如何使用KO显示来自嵌套数组的下拉值

回答

相关问题