How to convert list to javascript array?

Question

Good evening everyone,

i know this question is old, but i couldnt solve it with other questions like here: How do I convert a C# List<string[]> to a Javascript array?. I am quite new to this.

I want to use the array in my javascript, to show the datepicker on which dates are events. My script(datepicker.js):

$(document).ready(function() {
    var array = []; //array that should be filled with dates like this ["29-09-2015", "..."]
    $("#datepicker").datepicker({
        numberOfMonths: 3,
        beforeShowDay: function (date) {
            if ($.inArray($.datepicker.formatDate('yy-mm-dd', date), array) > -1) {
                return [false, "", " no"];
            }
            else {
                return [true, "", "yes"];
            }
        }
    });
});

My Controller looks like this:

public ActionResult Index(int EID = 0, int CID = 0, int IID= 0)
{
   var dates = db.Histories.Where(p => p.SiteId == EID && p.CId == CID && p.IId == IID).Select(p => SqlFunctions.StringConvert((double)
            SqlFunctions.DatePart("m", p.Date)).Trim() + "-" +
            SqlFunctions.DateName("dd", p.Date) + "-" +
            SqlFunctions.DateName("yyyy", p.Date));
    dates = dates.OrderBy(u => u.Length);

    int datescount = dates.Count();
    List<string> sList = new List<string>();
    for(int i =0; i<datescount; i++)
    {
        sList.Add(dates.Skip(i).First());
    }

    return View();
}

In the controller the list sList contains the dates i want to show as events.

In the view the datepicker, which i can already see, will be called like this:

Date: <div id="datepicker"></div>

So now i want to send the list to the script and convert it there to an array. Could you explain me how to do it?

On the other page i didnt understand what Romoku meant with:

//View.cshtml
  <script type="text/javascript">
var arrayOfArrays = JSON.parse('@Html.Raw(Model.Addresses)');

Do i have to transfer the list to a model, if i use json? What is with the IDs? How to transfer them to the json method?

No, then he shows the error Error: Cannot convert method group 'ToList' to non-delegate type 'System.Linq.IQueryable'. Did you intend to invoke the method? The list does the job. — Mimi Müller, Aug 13 '15 at 16:50
No. _Read the error message_. You need to call the function. — SLaks, Aug 13 '15 at 16:51
thank you, that will be way more faster, but that wasnt the actual problem... — Mimi Müller, Aug 13 '15 at 16:54
You need to serialize the list to JSON, then emit that JSON as a Javascript literal. — SLaks, Aug 13 '15 at 16:57
ok the first part to serialize i understand but the second part? could you please be a bit more detailed? — Mimi Müller, Aug 13 '15 at 17:05

score 0 · Answer 1 · answered Aug 13 '15 at 17:12

0

JSON is valid Javascript. You just need to emit the serialized JSON as a normal Javascript expression:

var arrayOfArrays = @Html.Raw(your JSON);

answered Aug 13 '15 at 17:12

SLaks

868,454
176
1,908
1,964

Scharly Ochoa · Answer 2 · 2015-08-13T20:51:00.217

0

In your controller return the list as Model to your View

{
    /// code ..
    return View(sList);
}

and your View try this

@model List<string>

@{
   string jsonObject = Newtonsoft.Json.JsonConvert.SerializeObject(Model);
}

<script type="text/javascript">
var array = @Html.Raw(jsonObject)
$(document).ready(function() {
    $("#datepicker").datepicker({
        numberOfMonths: 3,
        beforeShowDay: function (date) {
            if ($.inArray($.datepicker.formatDate('yy-mm-dd', date), array) > -1) {
                return [false, "", " no"];
            }
            else {
                return [true, "", "yes"];
            }
        }
    });
});
</script>

edited Aug 13 '15 at 20:51

answered Aug 13 '15 at 17:42

Scharly Ochoa

301
1
6

Thank you. But if i set a breakpoint into the script, he doesnt access .datepicker, and shows a warning at "var array = @Html.Raw(jsonObject);" that ";" is a Syntax error. And it wont go well... So far in the jsonObject is the string that should be there. – Mimi Müller Aug 13 '15 at 20:44
What about if u put var array = @Html.Raw(jsonObject) outside $(document).ready ... check my edit – Scharly Ochoa Aug 13 '15 at 20:48
its the same. I already had a similar problem here: http://stackoverflow.com/questions/31641641/script-doesnt-connect-to-jsonresult-controller (At the point: Update (It's working!!!)). There i had to insert the right url instead of the razor helpers. I searched through the internet but didnt found anything...do you know how to find a alternative? Could it be that it is because of that? – Mimi Müller Aug 13 '15 at 21:02
Well in that case your javascript code was in a separate JS file and razor syntax only works on a .cshtml file. Now Its kinda wierd that the code that i posted doesnt work because i insert objects that way very often can u tell me what does it render as the "array" variable looking at the source code? – Scharly Ochoa Aug 13 '15 at 21:08
i cant access the array, just the jsonObject. If i set there a breakpoint, it is a mapped breakpoint and it is never used when i run the program. – Mimi Müller Aug 13 '15 at 21:22
If you check in your browser console is there any array variable? if so what does it show – Scharly Ochoa Aug 13 '15 at 21:27
if i go in google chrome browser to network and there choose the first one with the url of the view and under options to response there it says: – Mimi Müller Aug 13 '15 at 21:35
And if you go to Console and type "array" and press enter what does it show? the array? if so its ok and there shoud be an error in your document ready event – Scharly Ochoa Aug 13 '15 at 21:41
the same ["8-12-2015", "8-10-2015"]. Ok i earased that statement, but both dates arnt highlighted... – Mimi Müller Aug 13 '15 at 21:52

How to convert list to javascript array?

2 Answers2