A circular reference was detected while serializing an object of type

I got the following circular error while running the application “A circular reference was detected while serializing an object of type System.Data.Entity.DynamicProxies”. If you don’t need all column properties of the object just pass the required properties because the object hierarchy is not supported by the JSON serializer.

I used entity frame work and passed the object  to bind the grid in angularjs using asp.net mvc c#.

I have issues with the following code:

public JsonResult GetProduct()
        {
            var products = db.Products.ToList();
            return Json(products, JsonRequestBehavior.AllowGet);
        }

JQuery Code:

<script type="text/javascript">
    var app = angular.module('mvcapp', ['ngTouch', 'ui.grid']);
    app.controller('DemoController', function ($scope, $http) {
        $scope.gridOptions = {
            enableSorting: true,
            rowHeight: 100,
            columnDefs: [
              { field: 'Name' },
              { field: 'UnitPrice' },
              { field: 'QuantityPerUnit'}
            ]
        };
        $http.get('/Product/GetProduct').success(function (data) {
            $scope.gridOptions.data = data;
        });
    });</script>

I got the following circular error

Solution:

I have returned the required json object properties  from a controller anction to the jQuery.

  public JsonResult GetProduct()
        {

           var products = (from product in db.Products.AsEnumerable()
                            select new
                            {
                                Name =product.ProductName,
                                UnitPrice =product.UnitPrice,
                                QuantityPerUnit= product.QuantityPerUnit
                           }).Distinct().ToList();
 
           return Json(products, JsonRequestBehavior.AllowGet);

        }