Not Filling from DataSource

[Jahanzeb Khan]

<div class="container">
    <input type=text id="test" name="test"/>
    <script language="JavaScript">
        $( document ).ready(function() {

            $.ajax({url: "getDDValues.php?action=getStatuses", success: function(result){
                alert("Here");
                var dat = JSON.stringify(result);
                alert(dat);
                //The alert shows the data below
                //dat = [{"value":"NEW","text":"NEW"},{"value":"Accepted","text":"Accepted"}];
                $("#test").ejDropDownList({dataSource:dat,fields: { text: "text", value: "value" }});
            }});
        });
    </script>
</div>

When I get the json data from the url, it is identical to the dat variable commented out.  I get an error:

Uncaught TypeError: Cannot read property 'slice' of undefined
    at Object._getFilteredList (ej.web.all.min.js:10)
    at Object._showFullList (ej.web.all.min.js:10)
    at Object._render (ej.web.all.min.js:10)
    at Object._init (ej.web.all.min.js:10)
    at new <anonymous> (ej.web.all.min.js:10)
    at w.fn.init.n.fn.(anonymous function) [as ejDropDownList] (http://{mysite}/EJ/Scripts/web/ej.web.all.min.js:10:24083)
    at Object.success (test1.php:69)
    at u (jquery-3.3.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.3.1.min.js:2)
    at k (jquery-3.3.1.min.js:2)
_getFilteredList @ ej.web.all.min.js:10
_showFullList @ ej.web.all.min.js:10
_render @ ej.web.all.min.js:10
_init @ ej.web.all.min.js:10
(anonymous) @ ej.web.all.min.js:10
n.fn.(anonymous function) @ ej.web.all.min.js:10
success @ test1.php:69
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
k @ jquery-3.3.1.min.js:2
(anonymous) @ jquery-3.3.1.min.js:2
load (async)
send @ jquery-3.3.1.min.js:2
ajax @ jquery-3.3.1.min.js:2
(anonymous) @ test1.php:64
l @ jquery-3.3.1.min.js:2
c @ jquery-3.3.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
fire @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
ready @ jquery-3.3.1.min.js:2
_ @ jquery-3.3.1.min.js:2

When I uncomment the dat variable it works fine.

Can you please help me fill the list from the URL

Thanks,

JK

[Prince Oliver]

Hello Jahanzeb,  

 

Greetings from Syncfusion support. 

 

We have prepared a sample with your code and able to replicate the issue. It seems the dataSource format is not returned correctly when using JSON.stringify. We have fetched data from OData services and mapped the result of JSON objects to “dat” variable which will be assigned as dataSource for DropDownList. Please refer to the below screenshot for the format of data returned in our end.  

 

 

 

As we are not aware of the data returned from the URL mentioned in your code, please ensure whether data is returned in this format. Also, you need not stringify this data as done in your code and directly set the array of JSON objects as dataSource. Please find the code used in our sample below.  

 

<script language="JavaScript"> 

    $( document ).ready(function() { 

        $.ajax({url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers', success: function(result){ 

            var dat = result.value; 

            console.log(dat); 

            //The alert shows the data below 

            //dat = [{"value":"NEW","text":"NEW"},{"value":"Accepted","text":"Accepted"}]; 

            $("#test").ejDropDownList({dataSource:dat,fields: { text: "CustomerID", value: "CompanyName" }}); 

        }}); 

    }); 

</script> 

 

Kindly refer to the following link for the sample: 

https://jsplayground.syncfusion.com/ys4xuhgm  

 

Let us know if you need any further assistance on this. 

 

Regards, 

Prince 

[Jahanzeb Khan]

Prince,

Dumb error on my part!

Thanks for all your help, it fixed the issue.

Regards,

JK

[Prince Oliver]

Hello Jahanzeb,   

Most welcome. We are glad to help you. 

Regards, 

Prince