为什么 $http 响应数据没有显示在 Angular js 中？答案

【问题标题】：Why $http response data are not shown in angular js?为什么 $http 响应数据没有显示在 Angular js 中？
【发布时间】：2016-04-25 18:38:27
【问题描述】：

我在 Angular js 中做了一个指令示例。我正在使用这个指令 https://github.com/ONE-LOGIC/ngFlowchart

当我获取静态数据时..它显示输出请检查我的 plunker http://plnkr.co/edit/d2hAhkFG0oN3HPBRS9UU?p=preview

但是当我使用 $http 请求并创建相同的 json 对象时。它不显示图表，请参阅我的 plunker 使用 $http 请求。我有与静态相同的数据对象

http://plnkr.co/edit/Vts6GdT0NNudZr2SJgVY?p=preview

$http.get('data.json').success(function(data) {
        console.log(data)
        var arr = data
        var model={};

        var new_array = []
        for (var i = 0; i < arr.length; i++) {
            var obj = {};
            obj.name = arr[i].name;
            obj.id = arr[i].id;
            obj.x = arr[i].x;
            obj.y = arr[i].y;
            obj.color = '#000';
            obj.borderColor = '#000';
            var p = {};
            p.type = 'flowchartConstants.bottomConnectorType';
            p.id = arr[i].con_id
            obj.connectors = [];
            obj.connectors.push(p);
            new_array.push(obj);

        }
        console.log('new array')
        console.log(new_array)
          model.nodes=new_array;


        var edge = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].children.length > 0) {

                for (var j = 0; j < arr[i].children.length; j++) {
                    var obj = {};
                    obj.source = arr[i].con_id;
                    obj.destination = arr[i].children[j].con_id;
                    edge.push(obj);
                }

            }

        }
          model.edges=edge;
        console.log(edge)
        console.log("model")
          console.log(JSON.stringify(model))
          $scope.flowchartselected = [];
      var modelservice = Modelfactory(model, $scope.flowchartselected);

    $scope.model = model;
    $scope.modelservice = modelservice;

    })

有什么更新吗？

【问题讨论】：

根据 Plunkr 的说法，没有找到您的数据。响应代码为 404，响应为：{ "statusCode": 404, "error": "Not Found" } 由于您只提供了一个 .success()（顺便说一句，已弃用，请考虑切换到 .then()），因此您无法捕获错误。
对不起，我会更新我的 plunker
plnkr.co/edit/Vts6GdT0NNudZr2SJgVY?p=preview
我正在研究它，可能需要一点时间才能完全理解代码才能看到错误。
得到了解决感谢帮助plnkr.co/edit/d2hAhkFG0oN3HPBRS9UU?p=preview

标签： angularjs angularjs-directive angularjs-scope angular-ui-router angularjs-ng-repeat

【解决方案1】：

Working Example

它现在可以工作了。

问题是当我们第一次加载指令时它没有参数值。因此，当图表指令尝试在没有参数的情况下初始化图表时，它会出错。所以，它不再起作用了。

如何解决问题？

只需在页面加载时提供一个虚拟参数。我给出了虚拟模型，

 $scope.model = model;
 $scope.modelservice = modelservice;

因此，首先您的图表将显示基于虚拟值的图表。之后，它使用来自服务器 ($http.get()) 的数据填充图表

【讨论】：