0

The returned json response data from http post is the following:

{"ResponseData":[["AUSTRALIA","VICTORIA","MELBOURNE"],["AUSTRALIA ","NEW SOUTH WALES","SYDNEY"]]}

Controller code:

app.controller('tableController', function ($scope)
    {
        $scope.customerTable = [];
        $scope.getTable = function ()
        {
            $http.get('getTable.do').success(function (data)
            {
                $scope.customerTable = data;
            });
        };
    });

Here is my div:

<div ng-controller="tableController">
    <p>    Click <a ng-click="getTable()">here</a> to load data.</p>
    <table>
        <tr>
            <th>COUNTRIES</th>
            <th>STATES</th>
            <th>CITIES</th>
        </tr>
        <tr ng-repeat="data in customerTable">
            <td>{{data[0]}}</td>
            <td>{{data[1]}}</td>
            <td>{{data[2]}}</td>
        </tr>
    </table>
</div>

When I use ng-repeat to load the data its just displaying it as {{data.country}} rather than actual value. There's no server side problem as I am getting response back but unable to understand why data is not displayed in the table?

Improve this question
14
  • Are you using any other frameworks? Such as Symfony which by default uses the same brackets for expressions -> {{expr}}. Commented Jun 28, 2015 at 19:18
  • No I am not using other frameworkds Commented Jun 28, 2015 at 19:19
  • 1
    You're trying to plot data.country, data.state and data.city but you don't handle any kind of objects with those properties (eg, obj = { country: 'Australia', state: 'Victoria', city: 'Melbourne' }). You only have an array of arrays. Maybe you should consider redesign the response so you won't need to iterate over an array of arrays and then assign each index from an inner array being the country, the state and the city in this order. Commented Jun 28, 2015 at 19:28
  • 1
    Your controller function doesn't have $http as parameter. Commented Jun 28, 2015 at 19:42
  • 1
    @kittu You did change your view structure, but you didn't change your controller (at least not in the question). As is pointed out in both answers below, you need to add the ResponseData array into your customerTable -- not the entire object that is returned. Commented Jun 28, 2015 at 19:47

2 Answers 2

Reset to default
3 
{"ResponseData":
     [
         ["AUSTRALIA","VICTORIA","MELBOURNE"],
         ["AUSTRALIA ","NEW SOUTH WALES","SYDNEY"]]
}

Its an object which contains array ResponseData, which contains two arrays with 3 strings. You should do this:

app.controller('tableController', function ($scope)
    {
        $scope.customerTable = [];
        $scope.getTable = function ()
        {
            $http.get('getTable.do').success(function (data)
            {
                $scope.customerTable = data.ResponseData;
            });
        };
    });

And HTML:

<div ng-controller="tableController">
    <p>    Click <a ng-click="getTable()">here</a> to load data.</p>
    <table>
        <tr>
            <th>COUNTRIES</th>
            <th>STATES</th>
            <th>CITIES</th>
        </tr>
        <tr ng-repeat="data in customerTable">
            <td>{{data[0]}}</td>
            <td>{{data[1]}}</td>
            <td>{{data[2]}}</td>
        </tr>
    </table>
</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Try this, Controller:-

app.controller('tableController', function ($scope)
    {
        $scope.customerTable = [];
        $scope.getTable = function ()
        {
            $http.get('getTable.do').success(function (data)
            {
                $scope.customerTable = data["ResponseData"];
            });
        };
    });

html:-

<div ng-controller="tableController">
            <p>    Click <a ng-click="getTable()">here</a> to load data.</p>
            <table>
                <tr>
                    <th>COUNTRIES</th>
                    <th>STATES</th>
                    <th>CITIES</th>
                </tr>
                <tr ng-repeat="data in customerTable">
                    <td>{{data[0]}}</td>
                    <td>{{data[1]}}</td>
                    <td>{{data[2]}}</td>
                </tr>
            </table>
        </div>1
Improve this answer

10 Comments

Tried this $scope.customerTable = data["ResponseData"]; still not working
Avalanche has pointed something about asynchronous call and code compilation. I am still new to angular. I think only registered directive will be called for compile function where as I am using controller in my case
yeah as per him, try putting console.log($scope.customerTable); before the controller ends. Have you verified?
add console.log(data) before ` $scope.customerTable = data;` inside $hhtp() in controller . Can you please tell what it logs.. that would be helpful
Thanks @Sudhansu. Fixed it finally. commented it above
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.