How to get the values of the child element from the parent element in angularjs - angularjs

Question

I have two database tables with one being the parent and the other being the child. The parent table has a reference to the child table. Database table was generated using code-first approach with the data models are below:
[Table("Family")]
public partial class Family
{
public int Id { get; set; }
public string Surname { get; set; }
public string FirstName { get; set; }
public int RoleId { get; set; }
public int FuId { get; set; }
public int RiskAreaId { get; set; }
public int LocationId { get; set; }
public DateTime CreatedDate { get; set; }
[ForeignKey("RoleId")]
public virtual Role Role { get; set; }
[ForeignKey("FuId")]
public virtual FamilyUnit FamilyUnit { get; set; }
[ForeignKey("RiskAreaId")]
public virtual RiskArea RiskArea { get; set; }
[ForeignKey("LocationId")]
public virtual Location Location { get; set; }
}
And the FamilyUnit table i below:
[Table("FamilyUnit")]
public partial class FamilyUnit
{
public int Id { get; set; }
[Column(TypeName = "varchar")]
[StringLength(50)]
[Required]
public string FamilyUnitName { get; set; }
public virtual IEnumerable<Family> Families { get; set; }
}
I then created a webAPI project so my project can consume the APIs. My Api is shown below:
[EnableCors("*", "*", "*")]
public class FamilyUnitController : ApiController
{
FamilyUnitBs familyUnitObjBs;
public FamilyUnitController()
{
familyUnitObjBs = new FamilyUnitBs();
}
[ResponseType(typeof(IEnumerable<FamilyUnit>))]
public IHttpActionResult Get()
{
var famUnits = familyUnitObjBs.GetALL();
return Ok(famUnits);
}
[ResponseType(typeof(FamilyUnit))]
public IHttpActionResult Get(int id)
{
FamilyUnit familyUnit = familyUnitObjBs.GetByID(id);
if (familyUnit != null)
return Ok(familyUnit);
else
return NotFound();
}
[ResponseType(typeof(FamilyUnit))]
public IHttpActionResult Delete(int id)
{
FamilyUnit familyUnit = familyUnitObjBs.GetByID(id);
if (familyUnit != null)
{
familyUnitObjBs.Delete(id);
return Ok(familyUnit);
}
else
{
return NotFound();
}
}
}
I then created another project called for the front-end of the application to consume the API methods.
Below is the angularjs controller with the factory service
appEIS.factory('familyMgmtService', function ($http,$rootScope) {
famMgmtObj = {};
famMgmtObj.getAll = function () {
var Fams;
Fams = $http({ method: 'Get', url:$rootScope.ServiceUrl+ 'FamilyUnit' }).
then(function (response) {
return response.data;
});
return Fams;
};
famMgmtObj.createFamily = function (fam) {
var Fam;
Fam = $http({ method: 'Post', url:$rootScope.ServiceUrl+ 'Family', data: fam }).
then(function (response) {
return response.data;
}, function(error) {
return error.data;
});
return Fam;
};
famMgmtObj.deleteFamilyById = function (eid) {
var Fams;
Fams = $http({ method: 'Delete', url:$rootScope.ServiceUrl+ 'FamilyUnit', params: { id: eid } }).
then(function (response) {
return response.data;
});
return Fams;
};
famMgmtObj.getFamilyByFuId = function (fid) {
var Fams;
console.log(fid);
Fams = $http({ method: 'Get', url: $rootScope.ServiceUrl + 'Family', params: { id: fid } }).
then(function (response) {
return response.data;
});
return Fams;
};
return famMgmtObj;
});
appEIS.controller('familyMgmtController', function ($scope, familyMgmtService, utilityService, $window) {
$scope.Sort = function (col) {
$scope.key = col;
$scope.AscOrDesc = !$scope.AscOrDesc;
};
familyMgmtService.getAll().then(function (result) {
$scope.Fams = result;
console.log(result);
});
$scope.CreateFamily = function (Fam, IsValid) {
if (IsValid) {
$scope.Fam.Password = utilityService.randomPassword();
familyMgmtService.createFamily(Fam).then(function (result) {
if (result.ModelState == null) {
$scope.Msg = " You have successfully created " + result.FamilyId;
$scope.Flg = true;
utilityService.myAlert();
$scope.serverErrorMsgs = "";
familyMgmtService.getAll().then(function (result) {
$scope.Fams = result;
});
}
else {
$scope.serverErrorMsgs = result.ModelState;
}
});
}
};
$scope.DeleteFamilyById = function (Fam) {
if ($window.confirm("Do you want to delete Family with Id:" + Fam.FamilyId + "?")) {
familyMgmtService.deleteFamilyById(Fam.FamilyId).then(function (result) {
if (result.ModelState == null) {
$scope.Msg = " You have successfully deleted " + result.FamilyId;
$scope.Flg = true;
utilityService.myAlert();
familyMgmtService.getAll().then(function (result) {
$scope.Fams = result;
});
}
else {
$scope.serverErrorMsgs = result.ModelState;
}
});
}
};
$scope.GetFamilyByFuId = function (Fam) {
familyMgmtService.getFamilyByFuId(Fam.fid).then(function (result) {
console.log(result);
$scope.Fams = result;
});
};
$scope.CreateMultiFamily = function () {
var file = $scope.myFile;
var uploadUrl = "http://localhost:60736/api/Upload/";
utilityService.uploadFile(file, uploadUrl, $scope.eid).then(function (result) {
$scope.image = result;
});
};
});
The family unit is displaying well in an accordion list but the various families are not getting displayed using the familyUnit Id as shown below:
<div class="panel-body">
<div dir-paginate="emp in Fams | filter:search | orderBy:key:AscOrDesc | itemsPerPage:10" class="wrapper center-block">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading{{emp.Id}}">
<h4 class="panel-title">
<div role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{emp.Id}}" aria-expanded="true" aria-controls="collapse{{emp.Id}}">
{{emp.FamilyUnitName}}
</div>
</h4>
</div>
<div id="collapse{{emp.Id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{emp.Id}}">
<div class="panel-body">
<div ng-repeat="f in emp.Families">{{f.FirstName}} - {{f.Surname}}</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Based on the discussion in the comments, this issue looks like the issue with data and not with the front-end (yet).
You need to load the Families details while getting the FamilyUnit in your Get(int id) method. There are two ways through which you can do the early loading.
Use Include with Linq, like:
var familyUnit = familyUnitObjBs.FamilyUnits
.Include(fu => fu.Families)
.Where (fu +. fu.Id == Id)
.ToList();
The second option could be using the early loading by removing the virtual from your data structure, which might be an issue if you plan to add more methods or maybe if you have test cases to override, still, it will look like:
[Table("FamilyUnit")]
public partial class FamilyUnit
{
public int Id { get; set; }
[Column(TypeName = "varchar")]
[StringLength(50)]
[Required]
public string FamilyUnitName { get; set; }
public IEnumerable<Family> Families { get; set; }
}
You can find more details about lazy loading and early loading at:
https://msdn.microsoft.com/en-us/library/jj574232(v=vs.113).aspx
EDIT:
1. You can use strong type instead of var for familyUnit:
List<FamilityUnit> familyUnit= familyUnitObjBs.FamilyUnits
.Include(fu => fu.Families)
.Where (fu +. fu.Id == Id)
.ToList();
Get the list instead of FirstOrDefault() if you need whole list:
return db.Familiies.Where(x => x.FuID == id).ToList();