用 JSON 填充 js 数组的问题

Question

我正在尝试从我使用 Angular 的 $http.get() 函数填充的 js 数组中列出 DOM 中的一些产品。

来自 php 的 JSON 回复工作正常，我 console.log 将数据及其 JSON 格式化为应有的格式，但 Angular 没有检测到这一点...

我的 JS 代码：

var app = angular.module("system", []);
var base = "http://localhost/web";

app.controller("CartController", ['$http', function($http){

    $http.get(base+'/store/getCartProducts').
            success(function(data,status,headers,config){
                this.products = data.products;

            }).
            error(function(data,status,headers,config){
                 console.log("Error: " + data);
            });


    this.remove = function(item){
        var id = item.id;
        var index = this.products.indexOf(item);

        this.products.splice(index,1);
    };


}]);

而我的 HTML 代码是：

<div ng-controller="CartController as cart" >
   <table>
        <tbody>

                <!-- CART ITEMS -->

                <tr ng-repeat="item in cart.products" ng-show="cart.products.length">

                        <td><img class="cart-bot-icon" ng-src="{{item.icon}}" ></td>
                        <td class="cart-product-title">{{item.title}}</td>
                        <td><span class="green-price">{{item.price | currency}}</span></td>
                        <td>
                            <a href ng-click="cart.remove(item)">
                                <span class="glyphicon glyphicon-trash delete-cart-item"></span>
                            </a>
                        </td>

                </tr>        
        </tbody>
    </table>
</div>

我尝试在控制器内部创建一个 this.loadProducts 函数，并在 div 上的 ng-init 上调用它，但它不会加载它们。

我已经打印了我的 products 数组的长度，它显示得非常完美。

我已尝试初始化 this.products = null，然后通过调用 this.loadProducts 来填充它，但什么也没有……

还尝试了$scope.products = [] 和$scope.products = null，但什么也没有……没有想法=/

编辑 1： 更改为使用 this 而不是 $scope。当我在成功方法中打印出data 时，我得到 [object Object]，正确的 JSON 对象。我也JSON.stringify(data) 得到一个带双引号的 JSON 字符串。

Answer 1

您必须使用this.products。使用Controller As 语法时没有$scope。

要调试，请尝试以下操作：

在您的 success(function (...) { ... }) 中，添加行 console.log("Data:", data);。

然后在您的 HTML 中添加行 {{cart.products}} 以查看是否绑定了任何内容。

我怀疑 ng-repeat 存在显示问题。我周五回答了一个类似的问题，用户也遇到了同样的问题。您从服务器获得的响应可能被解释为字符串，而不是对象。

您可能需要将其从字符串转换为 json：JSON.parse(data.products);

我认为问题在于您的服务器返回的 JSON 无效。例如，如果它使用单引号而不是双引号，那将是无效的 JSON。