Monzingo Monzingo - 1 year ago 84
JSON Question

AngularRest API wont return JSON property

I have 3 components, the web api, the controller, and the html. I can hit the web api just fine and i get back the results in JSON format, but when it then tries to render the JSON into the html, it looks like this.

"Projects": [{
"ProjectId": 1,
"Name": "Project1",
"Key": "Software",
"ProjectTypeKey": "1"
}, {
"ProjectId": 2,
"Name": "Project2",
"Key": "Hardware",
"ProjectTypeKey": "2"
}, {
"ProjectId": 3,
"Name": "Project3",
"Key": "Hardware",
"ProjectTypeKey": "3"


public IHttpActionResult Get()
listProjects.Add(new Project { ProjectId = 1, Name = "Project1", Key = "Software", ProjectTypeKey = "1" });
listProjects.Add(new Project { ProjectId = 2, Name = "Project2", Key = "Hardware", ProjectTypeKey = "2" });

listEmployeeProject.Add(new EmployeeProject {Projects = listProjects });

return Json(listEmployeeProject);


var myApp = angular.module('myApp', []);

myApp.service('dataService', function ($http) {

this.getData = function () {
// $http() returns a $promise that we can add handlers with .then()
return $http({
method: 'GET',
url: '/api/employee'

myApp.controller('ProjectController', function ($scope, dataService) {
$scope.Projects = [];
dataService.getData().then(function (result) {
$scope.Projects =;


<div ng-app="myApp" ng-controller="ProjectController">
{{1 + 1}}

<div ng-repeat="project in Projects">

Even when i switch {{project}} to {{project.Name}}, nothing renders on the page.

console.log( looks like below

enter image description here

Answer Source

Its very clear from your console that you are returning an array of length 1 which has another array of length 3 in it

This is because of this line in your code

listEmployeeProject.Add(new EmployeeProject {Projects = listProjects });

Here you are retuning a EmployeeProject array and each element of that array has multiple projects. So do either of these things

a. Return listProjects like return Json(listProjects) (You should be returning Ok(model) ideally)

b. Or in angular promise do,

$scope.Projects =[0].Projects;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download