How do I convert a C# List<string[]> to a JavaScript array using Razor snytax?

Question

I have a datatable that I'm converting into a List<string[]>, serializing it and passing it to my view using a viewmodel.

My viewmodel looks like this:

public class AddressModel { public string Addresses { get; set; } } 

My controller action looks like the following:

AddressModel lAddressGeocodeModel = new AddressGeocodeModel(); List<string[]> lAddresses = new List<string[]>(); string lSQL = " select Address1, CityName, StateCode, ZipCode " + " from AddressTable "; // Convert the data to a List to be serialized into a Javascript array. //{ ...data retrieval code goes here... //} foreach (DataRow row in AddressTable.Rows) { string[] lAddress = new string[5]; lAddress[1] = row["Address1"].ToString(); lAddress[2] = row["CityName"].ToString(); lAddress[3] = row["StateCode"].ToString(); lAddress[4] = row["ZipCode"].ToString(); lAddresses.Add(lAddress); } lAddressGeocodeModel.UnitCount = lAddresses.Count().ToString(); // Here I'm using the Newtonsoft JSON library to serialize my List lAddressGeocodeModel.Addresses = JsonConvert.SerializeObject(lAddresses); return View(lAddressModel); 

Then in my view I get the following string of addresses:

[["123 Street St.","City","CA","12345"],["456 Street St.","City","UT","12345"],["789 Street St.","City","OR","12345"]] 

How am I supposed to get this serialized string residing in a razor model into a JavaScript array?

Answer 1

You could directly inject the values into JavaScript:

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

See JSON.parse, Html.Raw

Alternatively you can get the values via Ajax:

public ActionResult GetValues() { // logic return Json(new { Addresses: lAddressGeocodeModel }); } <script type="text/javascript"> $(function() { $.ajax({ type: 'POST', url: '@Url.Action("GetValues")', success: function(result) { // do something with result } }); }); </script> 

See jQuery.ajax

Answer 2

Many way to Json Parse but i have found most effective way to

 @model List<string[]> <script> function DataParse() { var model = '@Html.Raw(Json.Encode(Model))'; var data = JSON.parse(model); for (i = 0; i < data.length; i++) { ...... } } </script> 

Answer 3

This worked for me in ASP.NET Core MVC.

<script type="text/javascript"> var ar = @Html.Raw(Json.Serialize(Model.Addresses)); </script> 

Answer 4

Many of these answers do work, but I have found the easiest way by far is to send data through ViewData or ViewBag and let JSON.Net serialize it.

I use this technique when Javascript is needed for HTML generation before the page load or when AJAX overhead needs to be avoided:

In the controller:

public ActionResult MyController() { var addresses = myAddressesGetter(); ViewData["addresses"] = addresses ; return View(); } 

In the view:

@section scripts { <script type="text/javascript"> var MyjavascriptAddresses: @Html.Raw(JsonConvert.SerializeObject(ViewData["addresses"])), </script> } 

You can always rely on JSON.NET whereas some browsers have poor JSON deserialization support. Another benefit over some methods in that you can see the Javascript using your browser's View --> Source, since it is simply text generated server-side.

Note that In most situations, Web API a more elegant way to get JSON to the client.

Answer 5

For those trying to do it without using JSON, the following is how I did it:

<script> var originalLabels = [ '@Html.Raw(string.Join("', '", Model.labels))']; </script> 

Answer 6

I would say it's more a problem of the way you're modeling your data. Instead of using string arrays for addresses, it would be much cleaner and easier to do something like this:

Create a class to represent your addresses, like this:

public class Address { public string Address1 { get; set; } public string CityName { get; set; } public string StateCode { get; set; } public string ZipCode { get; set; } } 

Then in your view model, you can populate those addresses like this:

public class ViewModel { public IList<Address> Addresses = new List<Address>(); public void PopulateAddresses() { foreach(DataRow row in AddressTable.Rows) { Address address = new Address { Address1 = row["Address1"].ToString(), CityName = row["CityName"].ToString(), StateCode = row["StateCode"].ToString(), ZipCode = row["ZipCode"].ToString() }; Addresses.Add(address); } lAddressGeocodeModel.Addresses = JsonConvert.SerializeObject(Addresses); } } 

Which will give you JSON that looks like this:

[{"Address1" : "123 Easy Street", "CityName": "New York", "StateCode": "NY", "ZipCode": "12345"}] 

Answer 7

Here's how you accomplish that:

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

Answer 8

For one dimension array

Controller:

using Newtonsoft.Json; var listOfIds = _dbContext.Countries.Where(x => x.Id == Country.USA).First().Cities.Where(x => x.IsCoveredByCompany).Select(x => x.Id).ToList(); string strArrayForJS = JsonConvert.SerializeObject(listOfIds); // [1,2,6,7,8,18,25,61,129] //Now pass it to the view through the model or ViewBag 

View:

<script> $(function () { var myArray = @HTML.Raw(Model.strArrayForJS); console.log(myArray); // [1, 2, 6, 7, 8, 18, 25, 61, 129] console.log(typeof (myArray)); //object }); </script> 

Answer 9

You can directly use the Json.Serialize of the C#

<script type="text/javascript"> var addresses = @Json.Serialize(Model.Addresses); </script> 

Answer 10

Simplest way is to convert data model to javascript object notation then markup without encoding.

 var addresses = @Html.Raw(Json.Encode(Model.Addresses)); console.log(addresses); 

Answer 11

JSON is valid JavaScript Object anyway, while you are printing JavaScript itself, you don't need to encode/decode JSON further once it is converted to JSON.

<script type="text/javascript"> var addresses = @Html.Raw(Model.Addresses); </script> 

Following will be printed, and it is valid JavaScript Expression.

<script type="text/javascript"> var addresses = [["123 Street St.","City","CA","12345"],["456 Street St.","City","UT","12345"],["789 Street St.","City","OR","12345"]]; </script>