AngularJS does not show Array of objects

Question

I am a newbie learning Angular. I have created a test page in Aps.net MVC using Angluar, trying to retrieve some data from DB.retrieving data is fine. it happens to be an object of Array. but ng-repeat doesn't show it. My Angular Controller

    (function () {  

    var CompanyController = function ($scope,companyRepository) {

        //another function which runs when http request completes.
        var onGetCompaniesComplete = function (response) {
            console.log(response);
            $scope.companiesList = response;
            alert($scope.companiesList.length);
        };
        // on error

        var onError = function (error) {
            console.log('An error occured while getting companies list');
        };

        $scope.Message = "Hello to the world of Angularjs.";

        //getting companies list.
        companyRepository.get().
        then(onGetCompaniesComplete, onError);

    };
    // registration the controller.
    registrationModule.controller('CompanyController',CompanyController);


}());

companyRepository

    registrationModule.factory('companyRepository', function ($http, $q) {
    return {
        get: function () {
            var deffered = $q.defer();
            $http.get('/CompanyNG/GetCompanies').success(deffered.resolve).error(deffered.reject);
            return deffered.promise;
        }
    }
});

Asp.Net controller action

 public ActionResult Index()
    {
        return View();
    }

    public string GetCompanies()
    {
        var companyModel = repository.Companies;
        //var jsonResult = Json(companyModel, JsonRequestBehavior.AllowGet);
        //return Json(companyModel, JsonRequestBehavior.AllowGet);
        var settings = new JsonSerializerSettings { ContractResolver=new CamelCasePropertyNamesContractResolver() };
        var companies = JsonConvert.SerializeObject(companyModel, Formatting.None, settings);
        return companies;
    }

View

    @section scripts{
    <script src="~/Scripts/Controllers/Repositories/CompanyRepository.js"></script>
    <script src="~/Scripts/Controllers/CompanyController.js"></script>
}
<div ng-controller="CompanyController">
    {{Message}}

    <table>
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Found
                </th>
                <th>
                    Office#
                </th>
                <th>
                    PSEB Registered

                </th>
            </tr>
        </thead>        
        <tbody>
        <tr ng-repeat="company in companiesList"></tr>
        <td>{{company.companyName}}</td>        
        </tbody>
    </table>
</div>

demonspeed667 · Accepted Answer · 2014-08-27 17:24:19Z

1

Like this

<tr ng-repeat="company in companiesList">
    <td>{{company.companyName}}</td>
</tr>

answered Aug 27, 2014 at 17:24

demonspeed667

366 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hamad Salahuddin · Accepted Answer · 2014-08-28 15:10:02Z

0

Guys I think found the cause to the problem. if you look into view. the html isn't defined properly.

<tr ng-repeat="company in companiesList"></tr>
<td>{{company.companyName}}</td>

Which should be like the following

<tr ng-repeat="company in companiesList">
    <td>{{company.companyName}}</td>
</tr>

It solved the problem and I was able to see the data on the page.

answered Aug 28, 2014 at 15:10

Hamad Salahuddin

1,1892 gold badges8 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJS does not show Array of objects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related