access each element in a data set from javascript
Question
I want to access each element in a data set from javascript. I want to do something like the following in my javascript.
for(var i = 0; i < @Model.saVM.mapDetails.Count; i++){
var data = @Model.saVM.mapDetails;
alert(data[i]);
}
But i keep getting this error
Unterminated template literal
Other things i have tried..
for(var i = 0; i < @Model.saVM.mapDetails.Count; i++){
var data = @Model.saVM.mapDetails.ElementAt(i);
}
AND
for(var i = 0; i < @Model.saVM.mapDetails.Count; i++){
var data = @Model.saVM.mapDetails.ElementAt(@:i);
}
Here is why i need to do this
I have an MVC application that binds data from Model into an html table. The number of rows and columns are variable depending on the data in Model.
public class StudentAssessmentViewModel
{
public StudentAssessmentViewModel() { }
public List<ShortResult> results { get; set; }
public List<ShortStudent> students {get; set;}
public List<MapDetail> mapDetails { get; set; }
public List<ResultType> resultTypes { get; set; }
public List<ShortResult> calculatedResults { get; set; }
public List<Mean> means { get; set; }
}
now in this table, when i create a td, i check if there is value and color in Model.results (that matches current student (in row) AND current Header (in column)) to be put in current td, if yes then put the value and color else move forward ie create next td.
Then i converted this table into a kendo grid, which preserved the td values but removed all the colors.
So now i have to separately parse results list and again assign colors to each cell in kendogrid.
2 answers
solution1
2 2017-05-23 03:11:55
I have make simple example , hope it will help you
View
@model IEnumerable<JqueryAjaxClientProject.Models.Details>
@{
Layout = null;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>modalPassTOjavascirpt</title>
</head>
<body>
<div>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
var model = '@Html.Raw(Json.Encode(Model)))'
console.log(model)
if (model != null) {
//loop over the model
}
});
</script>
</body>
Controller:
public List<Details> getCollection () {
List<Details> obe = new List<Details>();
for (int i = 0; i < 10; i++)
{
Details obj = new Details();
obj.Id = 1;
obj.name = "nae";
obe.Add(obj);
}
return obe;
}
public ActionResult modalPassTOjavascirpt() {
var get = getCollection();
return View(get);
}
Output
Updated
JS/script
var model = '@Html.Raw(Json.Encode(Model))'
// console.log(model)
if (model != null) {
$.each(JSON.parse(model), function (i, data) {
var row = data;
console.log(row);
});
}
});
OUTPUT
solution2
1 ACCPTED 2017-05-23 03:33:41
To loop you need to do as below:
<script>
var model = @Html.Raw(Json.Encode(@Model.saVM.mapDetails));
$(model).each(function (index, item) {
console.log(item.MapId);
console.log(item.MapName});
</script>
Assuming you have MapId and MapName properties in mapDetails. Hope it helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.