CODEWITHSUNDEEP
javascriptajax
gonzzz
gonzzz

Reputation: 91

For each through List<string> returned from AJAX GET in JavaScript

The problem is as the title describes... I'm trying to loop through the values in a list of strings and alert them on the page. Unfortunately, I keep getting an error of...

"Uncaught TypeError: response.forEach is not a function"

I've read a few other places on SO about for loops in javascript, but it seems that it works with arrays. I'll state that I'm a novice when it comes to JavaScript... so is there an equivalent .ToArray() method in JavaScript? I've written a simple application to show what it is I'm trying to accomplish.

Note: I'm unable to change the return type of the controller method "GetStringList". In the larger application, the method must return a list of strings.

Controller Method (C#)

    public List<string> GetStringList(){
        List<string> listOfStrings = new List<string>();

        SqlConnection sqlConn = new SqlConnection(connection_String);

        sqlConn.Open();

        string sqlStr = "SELECT * FROM dbo.[SampleOrders] WHERE Active = 1";
        SqlCommand sqlCmd = new SqlCommand(sqlStr, sqlConn);
        SqlDataReader sqlDR = sqlCmd.ExecuteReader();

        if (sqlDR.HasRows) {
            while (sqlDR.Read()) {
                listOfStrings.Add((string)sqlDR["SalesOrder"]);
            }
        }

        sqlDR.Close();
        sqlCmd.Dispose();
        sqlConn.Close();

        return listOfStrings;
    }

View / JavaScript Function

    <script>
        $(document).ready(function () {
            $('#demoBtn').click(function () {
                $.ajax({
                    type: 'GET',
                    url: '/Home/GetStringList',
                    success: function (response) {
                        response.forEach(function (item) {
                            alert(item);
                        });
                    }
                });
            });
        });
    </script>

Please let me know if any clarifications need made -- thanks!

Upvotes: 1

Views: 3318

Answers (2)

Piyin
Piyin

Reputation: 1834

You can't just return listOfStrings as it would just print something like System.Collections.Generic.List 1[System.String]

So you should change your code to something like:

return string.Join(",",listOfStrings);

But, since you want to traverse it using Javascript, I suggest returning it as a JSON, doing this:

using Newtonsoft.Json;
...
return JsonConvert.SerializeObject(listOfStrings);

This way, you'll end up with an string similar to:

["string1","string2","string3"]

Now, you may change your jQuery so it expects a JSON:

$.ajax({
  type: 'GET',
  dataType: 'json', //So your response will be parsed and ready to use as a Javascript object
  url: '/Home/GetStringList',
  success: function (response) {
    response.forEach(function (item) {
      alert(item);
    });
  }
});

If you absolutely don't want to change the return statement of the function, you have two options:

  • Use an optional parameter so you can tell when you need a JSON
public List<string> GetStringList(bool json = False){
  ...
  if(json){
    return JsonConvert.SerializeObject(listOfStrings);
  }
  return listOfStrings;
}
  • Create another method to wrap the return, like so:
public string GetStringListAsJSON(){
  return JsonConvert.SerializeObject(GetStringList());
}

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65806

.forEach() is an array method. response is the XMLHttpRequest response string. Since there is no List<String> type in JavaScript, you just have a big string.

You should try parsing that string into an Array (if that's the structure you've received) with var myArray = JSON.parse(response) and then you'd be able to call .forEach() on myArray.

Have you actually logged response to see the exact syntax you are getting?

Upvotes: 2

Related Questions