javascript - dropdownlist dataSource 添加一个创建的js字符串

Question

<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { id:1, name: "Apples" },
    { id:2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id"
});
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
 var jsonStr = "";
 for (var jx = 3; jx  < 21; jx++) 
 {
     jsonStr = '{ '
                  + 'id : '
                  + jx + 
                  ", "
                  + 'name : '
                  + '"blaaa_'+jx+ '"'
                  + ' }';
                  dropdownlist.dataSource.add(jsonStr);
                  // give me an "undefined" not a fruit (no errors in console)
                  // console.log(jsonStr);
}
dropdownlist.dataSource.add({ id : 21, name : "Strawbeery" });
// works
</script>

为什么我不能在我的数据源中添加一个自创的 js 字符串？我虽然尝试过 var Myresult = JSON.parse(jsonStr);

Answer 1

您使用本地数据创建数据源，这是一个对象数组（json 格式只能用于绑定到远程数据）。

如果要添加 json 格式的项目，则必须先解析它们：

var parsedObject = JSON.parse(jsonObject);
dropdownlist.dataSource.add(parsedObject);

请参阅工作示例：http: //jsfiddle.net/lhoeppner/82Cyt/

您还可以扩展 DataSource 小部件，以便它为您执行此操作，但是不清楚为什么要首先添加 json 字符串而不是 JS 对象。

Answer 2

问题是您正在添加一个字符串，而add方法需要一个 JSON 对象。所以要么使用：

dropdownlist.dataSource.add(JSON.parse(jsonStr));

或者更容易将 JSON 对象构建为：

<script>
    $("#dropdownlist").kendoDropDownList({
        dataSource    : [
            { id: 1, name: "Apples" },
            { id: 2, name: "Oranges" }
        ],
        dataTextField : "name",
        dataValueField: "id"
    });
    var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
    var jsonStr = "";
    for (var jx = 3; jx < 21; jx++) {
        json = {
            id  : jx,
            name: "blaaa" + jx
        };

        dropdownlist.dataSource.add(json);
    }
    dropdownlist.dataSource.add({ id: 21, name: "Strawbeery" });
</script>