Data not showing while automatically creating rows using angularjs

Question

while i am trying to display my data in html using ng-repeat its not displaying. I am trying to create rows dynamically. But the list is not getting displayed.

This is my controller:

app.controller('SearchBusController',['$scope','$sessionStorage','$http','$state',function($scope,$sessionStorage,$http,$state){
    var a="http://localhost:8080/business/allbusiness";
    $scope.BusinessList=[];
            $.ajax({
    type:'GET',
    url:a,

    success:function(data){

    $scope.BusinessList=data;   
    console.log(data)
    },
    error:function(data){
        //alert("unsuccessfull");
        },  
    dataType:"json",
    contentType:"application/json",
});



    }]);

This is my html:

<div ng-app="app" ng-controller="SearchBusController">
    <table class="table1" cellspacing="0px" border="1"  width="60%;" style="background:white;">
    <tr ng-repeat="business in BusinessList">
    <td width="13%">
    <img src="images/welcome.jpg" style= "width:100%;" align="left">
    </td>
   <td colspan="2">
   <a href="">
    <p><span><h3 style="color:white;">{{business.BusinessDTO.company_name}}</h3></p></span></a>
    <a href=""> 
    <p><span><h3>{{business.BusinessDTO.address}}</h3></p></span></a>
    </td>
    </tr>
<table>
</div>

I am getting list in $scope.BusinessList which is

{"businessList":[{"BusinessDTO":{"businessId":1,"company_name":"Zafin","about_company":"asdasd"}},{"BusinessDTO":{"businessId":2,"company_name":"aaa","about_company":"hgfh"}}]}

any help??

use $http service to make API call instead of $.ajax, it will help you to keep UI in sync by running digest cycle., — Pankaj Parkar
– Pankaj Parkar, Commented Apr 4, 2017 at 5:36
Yes use $http instead of $ ajax because when you use $ ajax the change happens out of the scope of angular an ugly way would be to call $scope.$apply(); inside your success callback after $scope.BusinessList=data; to manually fire apply but suggest you to use $http — Vinod Louis
– Vinod Louis, Commented Apr 4, 2017 at 5:38

Banshi Lal Dangi · Accepted Answer · 2017-04-04 05:59:25Z

1

Just try by updating your list assignment as below.

Replace following

$scope.BusinessList=data;

With

$scope.BusinessList=data.businessList;

answered Apr 4, 2017 at 5:59

Banshi Lal Dangi

6753 silver badges11 bronze badges

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

Comments

ahmetugurbulut · Accepted Answer · 2017-04-04 05:44:09Z

0

You can try to add $scope.$apply() after $scope.BusinessList=data.

Also please check your json objects. Your json isn't array. So you cannot use ng-repeat. It must be BusinessList.businessList.

{
      "businessList": [{
          "BusinessDTO": {
              "businessId": 1,
              "company_name": "Zafin",
              "about_company": "asdasd"
          }
      }, {
          "BusinessDTO": {
              "businessId": 2,
              "company_name": "aaa",
              "about_company": "hgfh"
          }
      }]
  }

answered Apr 4, 2017 at 5:44

ahmetugurbulut

1,60911 silver badges25 bronze badges

Collectives™ on Stack Overflow

Data not showing while automatically creating rows using angularjs

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