WEB API JSON Serialization Circular Links

Question

I am trying to access property fields (JSON) from a child object retrieved from the Web API. However, looking at the browser console, it displays a link instead of fields. How to access these fields?

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 code below in WebApiConfig.cs

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