How display ajax data in select2.js v4.0?

Question

I am using select2 v4.0 https://select2.github.io/ in an asp mvc project and I want display a simple dropdown from dynamic Data

The old way of version 3.6 doesn't work anymore:

I have a c# methode:

public JsonResult GetSrcMethod()
 {
            var list = new[]
            { 
                new { id= 0, text= "Smith" },
                new { id= 1, text= "John" }, 
                new { id= 2, text= "Philippe" },    
            }.ToList();

            Object json = JsonConvert.SerializeObject(list);
            return Json(json, JsonRequestBehavior.AllowGet);   
 }

Thus, the data returned is:

[{"id":0,"text":"Smith"},{"id":1,"text":"John"},{"id":2,"text":"Philippe"}]

And I have a javascript code which worked on previous version 3.6:

$(".example-select2").select2({
        ajax: {
            dataType: 'json',
            url: '@Url.Action("GetSrcLanguages", "GetCheckSet")',
            results: function (data) {
                return {results: data};
            }              
        }
    });

It render an empty dropdownlist that displays 'No result found'

Do you know how to do it in v4.0?

Kevin Brown-Silva · Accepted Answer · 2015-07-20 22:34:01Z

3

Id is not the same as id, properties on JavaScript objects are case-sensitive. The same applies to Text and text as well, you want to use the all-lowercase versions.

public JsonResult GetSrcLanguages()
        {
            var list = new[]
            { 
                new { id = 0, text = "Smith" },
                new { id = 1, text = "John" }, 
                new { id = 2, text = "Philippe" },    
            }.ToList();

            Object json = JsonConvert.SerializeObject(list);
            return Json(json, JsonRequestBehavior.AllowGet);   
        }

Also, the ajax.results method was renamed to ajax.processResults in 4.0.0 to avoid conflicting with AJAX transports that have an existing results method. So your JavaScript should actually look like

$(".example-select2").select2({
    ajax: {
        dataType: 'json',
        url: '@Url.Action("GetSrcLanguages", "GetCheckSet")',
        processResults: function (data) {
            return {results: data};
        }              
    }
});

edited Jul 20, 2015 at 22:34

answered Jul 19, 2015 at 20:28

Kevin Brown-Silva

41.8k42 gold badges207 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lambdaDev Over a year ago

thank, you are right but there is certainly another error because, after fix that error, it is still showing 'No Result found' , allmost all things have changed vith v4 so I suppose results method is certainly depreciated and I am looking for new way to do that but I don't find it in doc

lambdaDev Over a year ago

I replaced method results: function (data) {return {results: data};} by processResults: function (data) {return {results: JSON.parse(data)};} and it works!! thank you very much, you saw the mistake! If you update your answere by adding that sample of code, I would be happy to mark it as the answere! :D

Collectives™ on Stack Overflow

How display ajax data in select2.js v4.0?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related