I've been working to extend the grid system by adding custom settings to the grid editor but I'm having trouble accessing the data from the JSON feed. If a setting has not been applied to a single box in the grid layout nothing is added to the JSON data resulting in a null reference when trying to access the data. Is there a way to ignore null references or another way to accomplish this?

Here is the error message I receive.

Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: Cannot perform runtime binding on a null reference

@helper renderRow(dynamic row, bool singleColumn){
    <div @RenderElementAttributes(row)>
        @Umbraco.If(singleColumn, "<div class='container'>")
        <div class="row clearfix">
            @foreach ( var area in row.areas ) {

        <pre>@area.config.backgroundColor</pre>

            <div class="[email protected] column" @RenderElementAttributes(area)>
                <div class="color-bg"></div>
                <div class="inner">
                    @foreach (var control in area.controls) {
                        if (control !=null && control.editor != null && control.editor.view != null ) {
                            <text>@Html.Partial("grid/editors/base", (object)control)</text>
                        }
                    }
                </div>
            </div>}
        </div>
        @Umbraco.If(singleColumn, "</div>")
    </div>
}

If I change the @area.config.backgroundColor to @area.config I can see the data in the front end but when I want to display the data for backgroundColor I get an error since not all boxes have a custom setting applied in the back office.

Here's an example of the data with a setting applied for backgroundColor

{
  "grid": 6,
  "config": {
    "backgroundColor": "Yellow",
    "textDirection": "Left"
  },
  "styles": {
    "background-image": "url(/media/1022/kids-riding-bikes.jpg)"
  },
  "hasConfig": true,
  "controls": [
    {
      "value": "<p>dszfbasfbasfb</p>",
      "editor": {
        "name": "Rich text editor",
        "alias": "rte",
        "view": "rte",
        "render": null,
        "icon": "icon-article",
        "config": {}
      },
      "active": false
    }
  ]
}

And here is an example of a box that does not have a setting applied for backgroundColor. These boxes are causing the error.

{
  "grid": 6,
  "hasConfig": false,
  "controls": [
    {
      "value": "<p>adljHBC jabdcljhb aLJDHBCL Hab oschjbljka</p>",
      "editor": {
        "name": "Rich text editor",
        "alias": "rte",
        "view": "rte",
        "render": null,
        "icon": "icon-article",
        "config": {}
      },
      "active": false
    },
    {
      "value": {
        "focalPoint": {
          "left": 0.5,
          "top": 0.5
        },
        "id": 1382,
        "image": "/media/1024/icon-files-purple.png"
      },
      "editor": {
        "name": "Icon",
        "alias": "media",
        "view": "media",
        "render": null,
        "icon": "icon-picture",
        "config": {}
      },
      "active": true
    }
  ],
  "active": true,
  "hasActiveChild": true
}