Razor foreach loop inside Javascript

Question

I'm creating a google chart and I have now made it look like I want it to with amounts of lines/bars and multiple axises and so on, now I want to have dynamic data inside of it.

function drawVisualization()
{
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([

        ['Day', 'KG', 'Average', 'peak'],

        ['1', 22000, 70, 90],

        ['2', 21000, 80, 87],

        ['3', 19000, 75, 79],

        ['4', 25000, 60, 88],

        ['5', 24000, 90, 95]
 ]);

So as of right now this is how the data is sent to the chart, 1,2,3,4,5 for hAxis and the rest for vAxis.

However I thought I could use a foreach in here and do something like this to return data:

@foreach (var c in db.Query(getWorkout))
{
    ['1', @c.kg, @c.rep, @c.sett];
}

The foreach actually works while no code is inside it so I guess the errors are all due to ['1', @c.kg, @c.rep, @c.sett]; this.

Anyone got any ideas of what to do? Would be tremendously thankful!

K D · Accepted Answer · 2017-01-17 08:49:20Z

1

try following

@foreach (var c in db.Query(getWorkout))
{
    <text>['1', @c.kg, @c.rep, @c.sett],</text>
}

answered Jan 17, 2017 at 8:49

K D

6,0091 gold badge25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pontus Svedberg Over a year ago

awesome! I did try <text> but around the entire foreach which didn't work but this did, thanks a lot!

Sanjay Nishad · Accepted Answer · 2017-01-17 08:48:28Z

0

I think it should work

first create an array in JavaScript

var dbData = [['Day', 'KG', 'Average', 'peak']];

then use razor @foreach to append data

@foreach (var c in db.Query(getWorkout))
{
  dbData.push(['1', @c.kg, @c.rep, @c.sett]);
}

then

var data = google.visualization.arrayToDataTable(dbData);

answered Jan 17, 2017 at 8:48

Sanjay Nishad

1,62515 silver badges29 bronze badges

Collectives™ on Stack Overflow

Razor foreach loop inside Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related