将json数据放入angularjs中的表中答案

【问题标题】：Getting json data into table in angularjs将json数据放入angularjs中的表中
【发布时间】：2015-06-29 04:13:15
【问题描述】：

http post返回的json响应数据如下：

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

控制器代码：

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

这是我的 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>

当我使用 ng-repeat 加载数据时，它只是将其显示为 {{data.country}} 而不是实际值。没有服务器端问题，因为我收到了回复，但无法理解为什么表格中没有显示数据？

【问题讨论】：

你在使用其他框架吗？例如 Symfony，默认情况下使用相同的括号表示表达式 -> {{expr}}。
不，我没有使用其他框架
您正在尝试绘制data.country、data.state 和data.city，但您不处理具有这些属性的任何类型的对象（例如，obj = { country: 'Australia',州：'维多利亚'，城市：'墨尔本'}）。你只有一个数组数组。也许您应该考虑重新设计响应，这样您就不需要遍历数组数组，然后按此顺序分配内部数组中的每个索引，即country、state 和city。跨度>
你的控制器函数没有$http作为参数。
@kittu 你确实改变了你的视图结构，但你没有改变你的控制器（至少在问题中没有）。正如下面两个答案所指出的，您需要将 ResponseData 数组添加到您的 customerTable 中——而不是返回的整个对象。

标签： angularjs

【解决方案1】：

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

它是一个包含数组 ResponseData 的对象，其中包含两个具有 3 个字符串的数组。你应该这样做：

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>

【讨论】：

【解决方案2】：

试试这个，控制器：-

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

【讨论】：

试过这个$scope.customerTable = data["ResponseData"];还是不行
Avalanche 指出了一些关于异步调用和代码编译的内容。我还是 Angular 的新手。我认为只有注册的指令将被调用编译功能，因为我在我的情况下使用控制器
是的，按照他的说法，尝试在控制器结束前输入console.log($scope.customerTable);。你验证了吗？
在控制器的$hhtp() 的`$scope.customerTable = data;` 之前添加console.log(data)。你能告诉它记录什么..这会有所帮助
谢谢@Sudhansu。终于修好了。在上面评论过