Javascript 在MVC中解析JSON字典中的键/值对结果

我已经浏览了这里的帖子，还没有找到一个有效的解决方案

我正在使用jqueryautocomplete作为员工下拉列表。我可以用值加载列表，但它包含我要传递的字典中的键，而不是值。我想把两者都展示出来

控制器代码：

public JsonResult GetEmp(string id)
    {
        if (id.Length > 3)
        {
            var result = Json(repository.SearchForEmployee(id), JsonRequestBehavior.AllowGet);
            return result;
        }

        return null;
    }

Jquery代码：

    $('.empId').keyup(function () {
    var x = $('.empId').val();
    var arrayValues = [];
    $.ajax({
        url: '../../Employee/GetEmployee',
        type: "Get",
        data: { id : x },
        cache: false,
        datatype: 'json',
        traditional: true,
        success: function (result) {
            $.each(result, function (item) {
                arrayValues.push(item);
            })
            $(".empId").autocomplete({
            source: arrayValues
        });
        },

        error: function (err) {
            alert('Foo')
        }
    });
});

调试时控制器操作中的JSON结果变量：

[0]  {[12345, Sharon Moore]}
[1]  {[12346, Amy Adams]}
[2]  {[12349, Adam Smith]}

自动完成的JScript数组的实际内容：

12345, 24563, 84565

有人能解释为什么它只带来第一个值（键）？键和值都是字符串。

---

再次提前感谢…

jQuery UI Autocomplete可以自己进行ajax调用，所以我不明白为什么要单独进行ajax调用

$("#txtbox").autocomplete({
    source: url
});

尽管如此，如果您想返回值和标签，那么控制器中的json应该以

[{label:“Choice1”，value:“value1”}，…]

的格式返回

---

jQuery UI Autocomplete可以自己进行ajax调用，所以我不明白为什么要单独进行ajax调用

$("#txtbox").autocomplete({
    source: url
});

尽管如此，如果您想返回值和标签，那么控制器中的json应该以

[{label:“Choice1”，value:“value1”}，…]

的格式返回

---

以下是我在几个地方使用的一段代码。我没有使用您正在使用的自动完成功能，但我不认为这是一个问题

客户端：

    $.getJSON('../../Employee/GetEmployee', { id: x }, function (results) {
        var yourDropdown = $('#YourDropdown');
        var json = JSON.parse(results);
        $.each(json, function (index, item) {
            yourDropdown.append($('<option/>', {
                value: item.Value,
                text: item.Text
            }));
        });

        //Implement the autocomplete feature.
    });

$.getJSON（'../../Employee/GetEmployee'，{id:x}，函数（结果）{
var yourDropdown=$（“#yourDropdown”）；
var json=json.parse（结果）；
$.each（json，函数（索引，项）{
您的下拉列表。附加（$（''）{
值：item.value，
text:item.text
}));
});
//实现自动完成功能。
});

服务器端：

    [HttpGet]
    public JsonResult GetElements(int id)
    {
        IEnumerable<SelectListItem> elements;

        //Some routine that gets the elements goes here.

        var serializer = new JavaScriptSerializer();
        return Json(serializer.Serialize(elements), JsonRequestBehavior.AllowGet);
    }

[HttpGet]
公共JsonResult GetElements（int id）
{
可数元素；
//这里有一些获取元素的例程。
var serializer=新的JavaScriptSerializer（）；
返回Json（serializer.Serialize（elements），JsonRequestBehavior.AllowGet）；
}

我没有在您的特定场景中测试代码，但是应该可以，因为我在多个地方使用了代码片段

---

注意：尝试使用getJson方法而不是$.ajax。它是您正在使用的ajax实现的快捷方式。如您所见，代码不那么冗长，可读性更高。

以下是我在几个地方使用的一段代码。我没有使用您正在使用的自动完成功能，但我不认为这是一个问题

客户端：

    $.getJSON('../../Employee/GetEmployee', { id: x }, function (results) {
        var yourDropdown = $('#YourDropdown');
        var json = JSON.parse(results);
        $.each(json, function (index, item) {
            yourDropdown.append($('<option/>', {
                value: item.Value,
                text: item.Text
            }));
        });

        //Implement the autocomplete feature.
    });

$.getJSON（'../../Employee/GetEmployee'，{id:x}，函数（结果）{
var yourDropdown=$（“#yourDropdown”）；
var json=json.parse（结果）；
$.each（json，函数（索引，项）{
您的下拉列表。附加（$（''）{
值：item.value，
text:item.text
}));
});
//实现自动完成功能。
});

服务器端：

    [HttpGet]
    public JsonResult GetElements(int id)
    {
        IEnumerable<SelectListItem> elements;

        //Some routine that gets the elements goes here.

        var serializer = new JavaScriptSerializer();
        return Json(serializer.Serialize(elements), JsonRequestBehavior.AllowGet);
    }

[HttpGet]
公共JsonResult GetElements（int id）
{
可数元素；
//这里有一些获取元素的例程。
var serializer=新的JavaScriptSerializer（）；
返回Json（serializer.Serialize（elements），JsonRequestBehavior.AllowGet）；
}

我没有在您的特定场景中测试代码，但是应该可以，因为我在多个地方使用了代码片段

---

注意：尝试使用getJson方法而不是$.ajax。它是您正在使用的ajax实现的快捷方式。正如您所看到的，代码不那么冗长，可读性更高。

JQuery UI Autocomplete希望特定的数据结构能够正常工作

SearchForEmployee必须以以下格式返回数据列表：

public class EmployeeAutocomplete
{
   public string @label { get; set; }
   public string @value { get; set; }
}

或者您需要在javascript中转换为该格式，而不是数组列表：

success: function (result) {
        $.each(result, function (item) {
            arrayValues.push(new { label: item[1], value: item[0] });
        });
        $(".empId").autocomplete({
            source: arrayValues
        });
    },

---

自动完成引用：

JQuery UI自动完成需要一个特定的数据结构

SearchForEmployee必须以以下格式返回数据列表：

public class EmployeeAutocomplete
{
   public string @label { get; set; }
   public string @value { get; set; }
}

或者您需要在javascript中转换为该格式，而不是数组列表：

success: function (result) {
        $.each(result, function (item) {
            arrayValues.push(new { label: item[1], value: item[0] });
        });
        $(".empId").autocomplete({
            source: arrayValues
        });
    },

---

自动完成引用：

由于您返回的是对象而不是数组，因此可以尝试以下操作：

var array_of_objects = [];
for (var key in result) {
   var val = result[key];
    //Now you have your key and value which you 
    //can add to a collection that your plugin uses
   var obj = {};
   obj.label = key;
   obj.value = val;
   array_of_objects.push(obj);
}

$(".empId").autocomplete({
     source: array_of_objects
});

或者，您可以在C#代码中返回一个ArrayList（这将是一个对象/记录数组）。以下是我的一个项目中的一些示例代码：

        [HttpPost]
        public ActionResult GetProject(int id) {
            string connStr = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;
            SqlConnection conn = new SqlConnection(connStr);

            string sql = "SELECT * FROM [Portfolio] WHERE [id] = @id";
            SqlDataAdapter da = new SqlDataAdapter(sql, conn);
            da.SelectCommand.Parameters.Add(new SqlParameter("@id", id));
            DataTable dt = new DataTable();

            conn.Open();
            da.Fill(dt);
            da.Dispose();
            conn.Close();

            return Json(objConv.DataTableToArrayList(dt), JsonRequestBehavior.AllowGet);
        }

objConv

是我使用的辅助工具。下面是我在上面的代码示例中使用的

DataTableToArrayList

方法的代码：

public ArrayList DataTableToArrayList(DataTable dataTbl) {

            ArrayList arrList = new ArrayList();

            foreach (DataRow dRow in dataTbl.Rows) {
                Hashtable recordHolder = new Hashtable();
                foreach (DataColumn column in dataTbl.Columns) {
                    if (dRow[column] != System.DBNull.Value) {
                        recordHolder.Add(column.ToString(), dRow[column].ToString());
                    } else {
                        recordHolder.Add(column.ToString(), "");
                    }
                }
                arrList.Add(recordHolder);
            }

            return arrList;
        }

---

由于返回的是对象而不是数组，因此可以尝试以下操作：

var array_of_objects = [];
for (var key in result) {
   var val = result[key];
    //Now you have your key and value which you 
    //can add to a collection that your plugin uses
   var obj = {};
   obj.label = key;
   obj.value = val;
   array_of_objects.push(obj);
}

$(".empId").autocomplete({
     source: array_of_objects
});

或者，您可以在C#代码中返回一个ArrayList（这将是一个对象/记录数组）。以下是我的一个项目中的一些示例代码：

        [HttpPost]
        public ActionResult GetProject(int id) {
            string connStr = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;
            SqlConnection conn = new SqlConnection(connStr);

            string sql = "SELECT * FROM [Portfolio] WHERE [id] = @id";
            SqlDataAdapter da = new SqlDataAdapter(sql, conn);
            da.SelectCommand.Parameters.Add(new SqlParameter("@id", id));
            DataTable dt = new DataTable();

            conn.Open();
            da.Fill(dt);
            da.Dispose();
            conn.Close();

            return Json(objConv.DataTableToArrayList(dt), JsonRequestBehavior.AllowGet);
        }

objConv

是我使用的辅助工具。下面是我在上面的代码示例中使用的

DataTableToArrayList

方法的代码：

public ArrayList DataTableToArrayList(DataTable dataTbl) {

            ArrayList arrList = new ArrayList();

            foreach (DataRow dRow in dataTbl.Rows) {
                Hashtable recordHolder = new Hashtable();
                foreach (DataColumn column in dataTbl.Columns) {
                    if (dRow[column] != System.DBNull.Value) {
                        recordHolder.Add(column.ToString(), dRow[column].ToString());
                    } else {
                        recordHolder.Add(column.ToString(), "");
                    }
                }
                arrList.Add(recordHolder);
            }

            return arrList;
        }

---

您需要在值字符串周围加引号吗？当您在

success

callback？控制台中

console.log（result）

时会看到什么。日志结果是：{“1289”：“KIRK BELL”，“1827”：“LINDA JONES”，“1963”：“LINDA SMITH”}，看起来像一个对象，而不是一个数组或一个对象数组。是否需要在值字符串周围加引号？当您在

成功
回调？控制台中使用
console.log（result）
时会看到什么。日志结果为：{“1289”：“柯克·贝尔”、“1827”：“琳达·琼斯”、“1963”：“琳达·史密斯”}，看起来像一个对象，而不是一个数组或一个对象数组。结果返回为{“1289”：“柯克·贝尔”、“1827”：“琳达·琼斯”、“1963”：“琳达·史密斯”}。如何将它们转换为以下格式：[{label:“Choice1”，value:“value1”}。。。