CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangular-ui-routerangularjs-ng-repeat
user944513
user944513

Reputation: 12729

Why $http response data are not shown in angular js?

I make a example of directive in angular js .I am using this directive https://github.com/ONE-LOGIC/ngFlowchart

when I take static data ..it show the output please check my plunker http://plnkr.co/edit/d2hAhkFG0oN3HPBRS9UU?p=preview

but when I use $http request and make same json object .it not display the chart see my plunker using $http request .I have same data object as in static

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;

    })

any update ?

Upvotes: 1

Views: 406

Answers (1)

Abhilash Augustine
Abhilash Augustine

Reputation: 4208

Working Example

It is now working.

The issue was when we load the directive first time it has no parameter value to it. So, when the chart directive try to initialize your chart with no parameter it gets an error. So, it will not work anymore.

How solve the issue?

Just give a dummy parameter upon the page load. I have given the dummy model as,

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

So, first your chart will display a chart based on the dummy values. After that it populates chart with the data from the server ($http.get())

Upvotes: 1

Related Questions