ASP.NET Web API: JSON Serializing Circular References

Question

I am retrieving a JSON object graph via ASP.NET Web API. I'm trying to access the properties from a child entity. When looking at the browser's console, however, it is showing a reference ($ref) to the object, instead of serializing the properties of that object. How do I get access to these properties?

ANGULAR JS VIEW

<table infinite-scroll='tF.loadMore()' infinite-scroll-disabled='tF.isBusy' infinite-scroll-distance='3' class="responsive">
    <thead>
        <tr>
            <th>FIELD 1</th>
            <th>FIELD 2</th>
            <th>FIELD 3</th>
            <th>FIELD 4</th>
            <th>FIELD 5</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in tF.items | filter:searchFilter">
            <td>{{item.CompanyDomainModel.CompanyName}}</td>
            <td>{{item.RatingDomainModel.RatingValue}}</td>
            <td>{{item.Views}}</td>
            <td>{{item.Clicks}}</td>
            <td>{{item.EmailSent}}</td>
        </tr>
    </tbody>
    <tfoot ng-show='tF.isBusy'>
        <tr>
            <td colspan="9"><spinner show="tF.isBusy" /><span class="bold">{{tF.status}}</span> </td>
        </tr>
    </tfoot>
</table>

SERVICE

public ICollection<CompanyStatDomainModel> GetRecordsByPageSize(int page) { 
  const int pgeSize = 20; 
  var result = _companyStatRepo
    .AllIncluding(c => c.CompanyDomainModel, c => c.RatingDomainModel) 
    .OrderBy(c => c.CompanyStatId)
    .Skip(page * pgeSize)
    .Take(pgeSize)
    .ToList(); 
  return result; 
} 

ENDPOINT

IHttpActionResult GetRecordsByPageSize(int page) { 
  var companyStatService = new CompanyStatService(); 
  return Ok(companyStatService.GetRecordsByPageSize(page)); 
} 

RATING DOMAIN MODEL

public class RatingDomainModel : IObjectWithState
{
  [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]
  [DataMember]
  public int RatingId { get; set; }

  [DataMember]
  public int CompanyId { get; set; }

  [DataMember]
  public int UserId { get; set; }

  [DataMember]
  public int RatingValue { get; set; }

  [DataMember]
  public DateTime CreatedDate { get; set; }

  //[ForeignKey("UserId")]
  [DataMember]
  public virtual UserDomainModel UserDomainModel { get; set; }

  //[ForeignKey("CompanyId")]
  [DataMember]
  public virtual CompanyDomainModel CompanyDomainModel { get; set; }

  [DataMember]
  public virtual ICollection<CompanyStatDomainModel> CompanyStatDomainModels { get; set; }

  [NotMapped]
  public Common.DataObject.State state { get; set; }

  [NotMapped]
  public bool InDb
  {
    get { return this.RatingId != default(int); }
  }

  public object PersistenceEntityId
  {
    get { return this.RatingId; }
  }
}

OUTPUT

Answer 1

Added the below code into WebApiConfig.cs

config.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling =    Newtonsoft.Json.ReferenceLoopHandling.Ignore;
config.Formatters.JsonFormatter.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.None;