Select2; how to load in an array that I load once from the database

Question

I am loading an array with the results of the following Action:

public ActionResult GetJudges(string q)
    {
        var judges = new List<Judge>();
        using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["db"].ConnectionString))
        {
            using (var cmd = con.CreateCommand())
            {
                cmd.CommandType = CommandType.Text;
                cmd.CommandText = "query";
                con.Open();
                using (var rdr = cmd.ExecuteReader())
                {
                    while (rdr.Read())
                    {
                        var judge = default(Judge);
                        var id = Convert.ToInt32(rdr["ID"]);
                        var email = Convert.ToString(rdr["Email"]);
                        var name = Convert.ToString(rdr["Name"]);
                        var jurisdiction = Convert.ToString(rdr["Jurisdiction"]);
                        var code= Convert.ToString(rdr["code"]);

                        if (!judges.Select(x => x.Id).Contains(id))
                        {
                            judge = new Judge
                            {
                                Id = id,
                                Email = email,
                                Name = name,
                                Code= code
                            };
                            judges.Add(judge);
                        }
                        else
                        {
                            judge = judges.FirstOrDefault(x => x.id == id);
                        }

                        judge.Jurisdictions.Add(jurisdiction);
                    }
                }
                con.Close();
            }
        }
        return Json(judges, JsonRequestBehavior.AllowGet);
    }

I am trying to load this array into a Select2 element, and having no success. The select2 element is always empty. Here is the javascript I am using to load the select2:

var judges = [];


    $(document).ready(function () {
        $.getJSON('/Home/GetJudges', function (result) {
            judges = result;
            $(".select2").select2({
                placeholder: "Search for a Judge",
                data: { results: result, id: "Id", text: "Text" }
            });
        });
    });

Can anyone tell me what I am missing here?

Answer 1

Look at this example on how to use select2. You are passing the data incorrectly. Your result should contain an array of objects that have an id property and a text property, and you should be passing that to select2 as data directly, rather than wrapping it in another object.

//sample data
var result = [{id: 0, text: 'Judge 1'}, {id: 1, text: 'Judge 2'}];

$(".select2").select2({
    placeholder: "Search for a Judge",
    data: result
});