I'm trying to populate the array in my script (it's going to be used for charting with D3.JS later on). According to [this post](https://stackoverflow.com/a/23781320/1525840), I'm supposed to use the syntax below. However, it doesn't work, bacause I get the error on the pushy line saying *Uncaught ReferenceError: WebSite is not defined*, where *WebSite* is the name of the namespace of the data (I'm guessing that, as it's the name of my project).

```
<script>
  var data = new Array();
  @foreach (var piece in @Model.DataPieces)
  {
    @:data.push(@piece);
  }
</script>

```

I'm pretty sure it has to do with the data type of *piece*, because the following change makes it work (at least not producing a bunch of errors). I'm picking out the individual fields from *piece* object and push those into the array, as a new object.

```
<script>
  var data = new Array();
  @foreach (var piece in @Model.DataPieces)
  {
    @:data.push({'cat': '@piece.Category', 'key': '@piece.Key', 'val': '@piece.Value'});
  }
</script>

```

It's inconvenient, prone to mistakes and requires a refactoring of the assignment each time the model changes. How can I avoid this approach and be able to automagically create JSON objects upon assignment, as shown in the first sample?

The viewmodel for the Razor page is declared as folows.

```
namespace WebSite.Models
{
  public class DrillDataViewModel
  {
    public List<DataPiece> DataPieces { get; set; }

    public class DataPiece
    {
      public string Category { get; set; }
      public string Key { get; set; }
      public int Value { get; set; }
    }
  }
}

```