How to retrieve list of strings in jquery at client side

Question

I have a list at my Home controller that is :

public List<string> BoomList()
        {
            List<string> BoomList = new List<string>()
            {
                "Rohit", "Harish", "Vivek"
            };

            return BoomList;
        }

I want to use the BoomList values at client side using jquery like :

<script type="text/jscript">
    $(document).ready(function () {
        $("#ButtonID").click(function () {
            var url = "/Home/BoomList";
            $.get(url, null, function (data) {// data is the list

                $("label[for=lblName]").text(data); // How to iterate data here?
            });
        })
    });
</script>

How to iterate through my list(data) here?

Duplicate of http://stackoverflow.com/questions/227624/asp-net-mvc-controller-actions-that-return-json-or-partial-html ? — mplungjan, Oct 13 '14 at 05:29
data is list object, i want to know how to iterate it over here? — rohit singh, Oct 13 '14 at 05:40
You can use [jquery each](http://api.jquery.com/each/) to iterate resulted list. See my answer with working demo [here](http://stackoverflow.com/questions/26333358/how-to-retrieve-list-of-strings-in-jquery-at-client-side/26333776#26333776) — Hüseyin BABAL, Oct 13 '14 at 05:59

score 0 · Answer 1 · answered Oct 13 '14 at 05:59

Demo

You can use following to iterate returned list. Let say that you have a div with and id lblDivs that surrounds labels;

<div id="lblDivs"></div>

And Js code in ajax success return will be;

$.each(data, function(k, v) {
    $("<label for=lbl" + k + ">").text(v).appendTo("#lblDivs");
});

I have concat list id with label name in order to prevent duplicate for names. You need to give name to related element to those label if exists.

score 0 · Answer 2 · answered Oct 13 '14 at 06:39

Your method at controller will return string... and you have to serialize list to string and return that string like:

public string BoomList()
{
    List<string> BoomList = new List<string>()
    {
        "Rohit", "Harish", "Vivek"
    };

    return Newtonsoft.Json.JsonConvert.SerializeObjectAsync(BoomList).Result;
}

and at client end you will have to parse it to JSON and then you can iterate like this:

$.ajax({
   url: "/Home/BoomList",
   type: 'get',
   success: function (data) {
      var isValidJson = IsJson(data);
      if (isValidJson) {
      var jsonObj = $.parseJSON(data);

         if (jsonObj != null) {
            $.each(jsonObj, function(i){
            alert(jsonObj[i]);
         });
      }
   }

}
});

function IsJson(str) {
try {
    JSON.parse(str);
} catch (e) {
    return false;
}
return true;
}

score -1 · Answer 3 · answered Oct 13 '14 at 05:44

U can use popular 'underscore js' javascript library from www.underscorejs.org

_.each(data, function(element, index, list) { dosomething with element.... }

)

_.each is one of 100 functions offered by underscore library. U can include underscore via visual studio nuget package manager and search for underscore.js

How to retrieve list of strings in jquery at client side

3 Answers3