locked
Getting data as list from a controller using jquery or ajax (instead of json) RRS feed

  • Question

  • User283528319 posted

    Hi All,

    I am trying to get a list<<g class="gr_ gr_28 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="28" data-gr-id="28">sting</g>> from a controller.

    Could you help me <g class="gr_ gr_56 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="56" data-gr-id="56">please</g>?

    Is it possible to get it without <g class="gr_ gr_83 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="83" data-gr-id="83">json</g>? and how

    If it is not how can I parse a simple <g class="gr_ gr_152 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="152" data-gr-id="152">json</g> (which only includes values like this {"Rabbit"<g class="gr_ gr_214 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="214" data-gr-id="214">,"</g>Dog"<g class="gr_ gr_215 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="215" data-gr-id="215">,"</g>Cat",...} to a list in client side by js or jquery.

    thanks.

    Wednesday, January 23, 2019 7:12 PM

Answers

  • User475983607 posted

    JavaScript and AJAX are event driven and asynchronous.  In your example...

    $(document).ready(function getthelist() {
            $.get( 'home/loadthelist', function (result) {
                 window.mylist = result;    
    
        });
    })

    the callback function runs when it receives the response.

    The assignment code...

        $("#MyInput").autocomplete({
            source: window.mylist,
            autoFocus: true
        });

    runs before the HTTP GET response.

    Assign the source in the callback handler.

    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <input id="MyInput" type="text" name="MyInput"/>
    
    
    @section Scripts {
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $.get('/api/Default', function (result) {
                    console.log(result);
                    $("#MyInput").autocomplete({
                        source: result,
                        autoFocus: true
                    });
                });
            });
        </script>
    }

    Promises allow you to order asynchronous operations.

        <script>
            $(function () {
                $.get('/api/Default', function (result) {
                    console.log(result);
                    return result;
                }).then(function (data) {
                    $("#MyInput").autocomplete({
                        source: data,
                        autoFocus: true
                    });
                });
            });
        </script>

    fatihbarut

    Note: the controller btw

       public List<string> Loadthelist()
            {
    .
    .
    .
    
                return list;
            }

    A List<string> and string[] serialize the same.  Generics List types provide useful extensions in .NET but they are still a collection type like an array.

        [ApiController]
        [Route("api/[controller]")]
        [Produces("application/json")]
        public class DefaultController : ControllerBase
        {
    
            // GET: api/Default
            [HttpGet]
            public List<string> Get()
            {
                return new List<string> { "Rabbit", "Dog", "Cat"};
            }

    Using jQueryUi with Bootstrap can cause UI issues.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 24, 2019 12:46 PM

All replies

  • User475983607 posted

    fatihbarut

    Hi All,

    I am trying to get a list<sting> from a controller.

    Could you help me please?

    thanks.

    Basic example...

        [ApiController]
        [Route("api/[controller]")]
        [Produces("application/json")]
        public class DefaultController : ControllerBase
        {
    
            // GET: api/Default
            [HttpGet]
            public IEnumerable<string> Get()
            {
                return new string[] { "Rabbit", "Dog", "Cat"};
            }
    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <input id="Button1" type="button" value="button" />
    <div id="results">
        <ul></ul>
    </div>
    
    @section Scripts {
        <script>
            $('#Button1').click(function () {
                $.ajax({
                    url: "/api/Default"
                }).done(function (data) {
                    console.log(data);
                    //Display the string array
                    $('#results ul')
                        .append(data.map(function (val, i) {
                            return "<li>" + val + "</li>"
                        }));
                });
            });
    
        </script>
    }

    Results

    Rabbit
    Dog
    Cat

    fatihbarut

    Is it possible to get it without json? and how

    JSON stands for JavaScript Object Notation.  You can return other data formats like XML but JSON works and is standard these days.

    fatihbarut

    If it is not how can I parse a simple json (which only includes values like this {"Rabbit","Dog","Cat",...} to a list in client side by js or jquery.

    The standard approach is letting the framework serialize basic types.  Manually serializing is most complex and new developers end up serializing data twice.

    Is there anyway you can post your code so we can see what you are doing?

    Wednesday, January 23, 2019 9:39 PM
  • User283528319 posted

    Thanks first of all.

    I use the autocomplete function of the jquery <g class="gr_ gr_23 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="23" data-gr-id="23">ui</g>. (Which I pretty much loved). for an input which shows states.

    And I need to provide an array of strings for that.   I want to download that array of strings at the page load. I get it via jquery get function with no problem. But I have <g class="gr_ gr_29 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="29" data-gr-id="29">problem</g> when appending it to a global variable.

    I am using this approach right now

    window.mylist=[]

    $(document).ready(function getthelist() { $.get( 'home/loadthelist', function (result) { window.mylist = result; }); })

    and I use autocomplete function as this

        $("#MyInput").autocomplete({
            source: window.mylist,
            autoFocus: true
        });

    When I use <g class="gr_ gr_25 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="25" data-gr-id="25">debugger</g> (in the function) I see that get function works and gets the whole list.

    <g class="gr_ gr_30 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="30" data-gr-id="30">However</g> when I put the debugger outside of the function global variable resets itself to its original form (null)

    Actually, my problem was this.

    Note: the controller btw

       public List<string> Loadthelist()
            {
    .
    .
    .
    
                return list;
            }

    Thursday, January 24, 2019 6:31 AM
  • User475983607 posted

    JavaScript and AJAX are event driven and asynchronous.  In your example...

    $(document).ready(function getthelist() {
            $.get( 'home/loadthelist', function (result) {
                 window.mylist = result;    
    
        });
    })

    the callback function runs when it receives the response.

    The assignment code...

        $("#MyInput").autocomplete({
            source: window.mylist,
            autoFocus: true
        });

    runs before the HTTP GET response.

    Assign the source in the callback handler.

    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <input id="MyInput" type="text" name="MyInput"/>
    
    
    @section Scripts {
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $.get('/api/Default', function (result) {
                    console.log(result);
                    $("#MyInput").autocomplete({
                        source: result,
                        autoFocus: true
                    });
                });
            });
        </script>
    }

    Promises allow you to order asynchronous operations.

        <script>
            $(function () {
                $.get('/api/Default', function (result) {
                    console.log(result);
                    return result;
                }).then(function (data) {
                    $("#MyInput").autocomplete({
                        source: data,
                        autoFocus: true
                    });
                });
            });
        </script>

    fatihbarut

    Note: the controller btw

       public List<string> Loadthelist()
            {
    .
    .
    .
    
                return list;
            }

    A List<string> and string[] serialize the same.  Generics List types provide useful extensions in .NET but they are still a collection type like an array.

        [ApiController]
        [Route("api/[controller]")]
        [Produces("application/json")]
        public class DefaultController : ControllerBase
        {
    
            // GET: api/Default
            [HttpGet]
            public List<string> Get()
            {
                return new List<string> { "Rabbit", "Dog", "Cat"};
            }

    Using jQueryUi with Bootstrap can cause UI issues.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 24, 2019 12:46 PM
  • User283528319 posted

    Using jQueryUi with Bootstrap can cause UI issues.

    Yeah, I know, therefore I customised it and just using <g class="gr_ gr_82 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="82" data-gr-id="82">the autocomplate</g> function but not anymore.

    Thursday, January 24, 2019 12:50 PM
  • User283528319 posted

    JavaScript and AJAX are <g class="gr_ gr_24 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="24" data-gr-id="24">event driven</g> and asynchronous.  In your example...

    $(document).ready(function getthelist() {
            $.get( 'home/loadthelist', function (result) {
                 window.mylist = result;    
    
        });
    })

    the callback function runs when it receives the response.

    The assignment code...

        $("#MyInput").autocomplete({
            source: window.mylist,
            autoFocus: true
        });

    runs before the HTTP GET response.

    Assign the source <g class="gr_ gr_19 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="19" data-gr-id="19">in</g> the callback handler.

    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <input id="MyInput" type="text" name="MyInput"/>
    
    
    @section Scripts {
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $.get('/api/Default', function (result) {
                    console.log(result);
                    $("#MyInput").autocomplete({
                        source: result,
                        autoFocus: true
                    });
                });
            });
        </script>
    }

    Promises allow you to order asynchronous operations.

        <script>
            $(function () {
                $.get('/api/Default', function (result) {
                    console.log(result);
                    return result;
                }).then(function (data) {
                    $("#MyInput").autocomplete({
                        source: data,
                        autoFocus: true
                    });
                });
            });
        </script>

    fatihbarut

    Note: the controller btw

       public List<string> Loadthelist()
            {
    .
    .
    .
    
                return list;
            }

    A List<string> and string[] serialize the same.  Generics List types provide useful extensions in .NET but they are still a collection type like an array.

        [ApiController]
        [Route("api/[controller]")]
        [Produces("application/json")]
        public class DefaultController : ControllerBase
        {
    
            // GET: api/Default
            [HttpGet]
            public List<string> Get()
            {
                return new List<string> { "Rabbit", "Dog", "Cat"};
            }

    Using jQueryUi with Bootstrap can cause UI issues.

    ıt worked great thanks.

    Thursday, January 24, 2019 1:07 PM