JSON data with AngularJS d3

Question

I have angular code like -

$scope.data =[];
$http({
          method: "GET",
          url: "http://127.0.0.1:8000/api/",
        }).then(function success(response){
          var total = response.data.length;
          for(var i=0; i<response.data.length; i++){
            $scope.companies.push(response.data[i].companies);
            $scope.wtdcagr.push(response.data[i].wtdcagr);
          }
          for(var i=0; i<$scope.wtdcagr.length; i++){
            $scope.final_wtdcagr.push($scope.wtdcagr[i]+10);
            $scope.sum += $scope.final_wtdcagr[i];
          }
          $scope.max_val=$scope.sum/total;
          for(var i=0; i<$scope.final_wtdcagr.length; i++){
            $scope.data.push({"name":$scope.companies[i], "children":[{"name":$scope.companies[i], "size":$scope.final_wtdcagr[i]}]});
          }
          $scope.load=1;
        },function error(response){
      });
    $scope.componentsData ={"name":"root","children":[{"name":"Koutons Retail India","children":[{"name":"Koutons Retail India","size":10}]},{"name":"Liberty Shoes","children":[{"name":"Liberty Shoes","size":7.975043433750518}]},{"name":"Bharat Petroleum Corporation","children":[{"name":"Bharat Petroleum Corporation","size":22.985710309643373}]},{"name":"Chennai Petroleum Corporation","children":[{"name":"Chennai Petroleum Corporation","size":13.214542375972897}]},{"name":"Gujarat State Fertilizers & Chemicals","children":[{"name":"Gujarat State Fertilizers & Chemicals","size":9.054818244756332}]},{"name":"Hindustan Organic Chemicals","children":[{"name":"Hindustan Organic Chemicals","size":10.54768008048322}]},{"name":"Tata Coffee","children":[{"name":"Tata Coffee","size":9.905904053799995}]},{"name":"Coffee Day Enterprises","children":[{"name":"Coffee Day Enterprises","size":9.132573506417222}]},{"name":"Corporation Bank","children":[{"name":"Corporation Bank","size":9.413101403401246}]},{"name":"Dena Bank","children":[{"name":"Dena Bank","size":2.9519383428833708}]}]} ;
    // $scope.componentsData = {
    //     "name": "root",
    //     "children": $scope.data
    //   };

and in my html-

<div id="treeParentDiv" style="width:1200px;height:600px;margin:auto" >
<treemap
        data="componentsData"
        parentElementId="treeParentDiv"
            color-label="size"
        size-label="size"
            max-val="10"
        search="{{searchbox}}"
            id="IDTreeMap">
</treemap>

It works when $scope.componentsData is static that is, but when I try to load it from json and pass it to the $scope.componentsData like-

$scope.componentsData = {
     "name": "root",
     "children": $scope.data
   };

It fails to work. The treemap that I am using is https://github.com/poshak/treemap

I suspect that the treemap renders before the data is received by $scope.data. Thanks

In your code $scope.componentsData is getting set before the $http promise if fulfilled. You need to move the setting of $scope.componentsData into the success callback of the promise — jbrown
– jbrown, Commented Jul 7, 2016 at 17:05

jbrown · Accepted Answer · 2016-07-07 17:07:44Z

1

In your code $scope.componentsData is getting set before the $http promise if fulfilled. You need to move the setting of $scope.componentsData into the success callback of the promise, like this:

  $http({
    method: "GET",
    url: "http://127.0.0.1:8000/api/",
  }).then(function success(response) {
    var total = response.data.length;
    for (var i = 0; i < response.data.length; i++) {
      $scope.companies.push(response.data[i].companies);
      $scope.wtdcagr.push(response.data[i].wtdcagr);
    }
    for (var j = 0; j < $scope.wtdcagr.length; j++) {
      $scope.final_wtdcagr.push($scope.wtdcagr[j] + 10);
      $scope.sum += $scope.final_wtdcagr[j];
    }
    $scope.max_val = $scope.sum / total;
    for (var k = 0; k < $scope.final_wtdcagr.length; k++) {
      $scope.data.push({
        "name": $scope.companies[k],
        "children": [{
          "name": $scope.companies[k],
          "size": $scope.final_wtdcagr[k]
        }]
      });
    }
    $scope.load = 1;
    $scope.componentsData = {
      "name": "root",
      "children": $scope.data
    };
  }, function error(response) {});

answered Jul 7, 2016 at 17:07

jbrown

3,0351 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sushant Over a year ago

It does not work even after setting it in the success function. I have posted a link to the treemap that I am using.

jbrown Over a year ago

@ThatBird - Ok, I can't load up that treemap component to test it so can you add this element: <pre>{{ componentsData | json }}</pre> to your html and tell me if it renders the data you are expecting?

Sushant Over a year ago

Json data is fine as when I copy paste it to the "children" of componentsData, the treemap renders just fine

jbrown Over a year ago

@ThatBird - ok, so have you stepped through your $http call to see if its being executed when expected and returning the expected results? Because based on the code you are showing the assignment of $scope.componentsData definitely needs to be in the success callback in order to be recognized in the appropriate digest cycle.

Sushant Over a year ago

So I tried to log two things, one in success callback and other outside of it, the one that's outside gets logged to the console first.

|

Prianca · Accepted Answer · 2016-07-07 17:09:51Z

0

You need to update $scope.componentsData inside the then function.

$scope.data =[];
$http({
          method: "GET",
          url: "http://127.0.0.1:8000/api/",
        }).then(function success(response){
          var total = response.data.length;
          for(var i=0; i<response.data.length; i++){
            $scope.companies.push(response.data[i].companies);
            $scope.wtdcagr.push(response.data[i].wtdcagr);
          }
          for(var i=0; i<$scope.wtdcagr.length; i++){
            $scope.final_wtdcagr.push($scope.wtdcagr[i]+10);
            $scope.sum += $scope.final_wtdcagr[i];
          }
          $scope.max_val=$scope.sum/total;
          for(var i=0; i<$scope.final_wtdcagr.length; i++){
            $scope.data.push({"name":$scope.companies[i], "children":[{"name":$scope.companies[i], "size":$scope.final_wtdcagr[i]}]});
          }
          $scope.load=1;
         $scope.componentsData = {
         "name": "root",
         "children": $scope.data
       };
        },function error(response){
      });

    // $scope.componentsData = {
    //     "name": "root",
    //     "children": $scope.data
    //   };

answered Jul 7, 2016 at 17:09

Prianca

4842 silver badges8 bronze badges

1 Comment

Sushant Over a year ago

It does not work even after setting it in the success function. I have posted a link to the treemap that I am using.

Collectives™ on Stack Overflow

JSON data with AngularJS d3

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related