Working with JSON and Angular NVD3

Question

My HTML code:

Here I am retrieving fields(key) from JSON file and displaying it in the options. Whichever option I am selecting from selection's dropdown section , I am sending that option to my angular script js file , through nvd3 directive data option( data="drawData(data.repeatSelect1)" ).

<div ng-controller="chartCtrl">

<label for="repeatSelect1"> Field 1: </label>
<select name="repeatSelect1" id="repeatSelect1" ng-model="data.repeatSelect1">
  <option ng-repeat="(key, val) in jsondata[0]">{{key}}</option>
</select>
<br />
<strong>Selected Field:</strong> {{data.repeatSelect1}}<br />
    <div class="col-md-6">
        <div class="well well-lg">
                <h2><kbd>Chart 1</kbd></h2>
                <nvd3-pie-chart
                      data="drawData(data.repeatSelect1)"
                      showLabels="true"
                      labelType="percent"
                      showValues="false"
                      tooltips="true"
                      x="xFunction()"
                      y="yFunction()"
                      donut="true"
                      donutRatio=".5"
                      labelThreshold = "0.05"
                      showLegend="true"
                      donutLabelsOutside="false"
                      transitionDuration = "500">
                </nvd3-pie-chart>
            </div>
        </div>
    </div>

Here is my angular script code :

    angular.module('myapp').factory("test",['$http',function($http){
    var obj = {};

    obj.fetchdata=function(){
        return $http.get('http://localhost:8080/data/my_json_file.json');
    }

    return obj;
}]) .controller('chartCtrl',function($scope,test){
        test.fetchdata().success(function(data){
            $scope.jsondata = data;


            $scope.drawData = function(tobeselected){
                                        d3.nest()
                                        .key(function(d)
                                            {
                                                console.log(tobeselected);
                                                return d.tobeselected;
                                            })
                                        .rollup(function(v){return v.length;})
                                        .entries(data)
            }

            $scope.xFunction = function() {
              return function(d) {
                return d.key;
              };
            }
            $scope.yFunction = function() {
              return function(d) {
                return d.values;
              };
            }
        });
})

And here is my_json_file.json

[{"Serial":"ARTUCALA","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ZAKDJSJS","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ARTUCALA","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ARTUCALA","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ZAKDJSJS","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{..}...]}

Code is working fine without any error.

For Example : If I select "Serial" field in drop down,it is selected properly and displayed in angularjs script file also ( using console.log(tobeselected);), but my d3.nest option is not working properly.

If I give normally like

d3.nest() .key(function(d){return d.Serial;} .rollup(function(v){return v.length;})

I am getting the chart properly. PLease help me to solve this problem .

Answer 1

if you want to use a dynamic property name, you need to use the associative array syntax

assuming tobeselected is the property name , then you can use d[tobeselected]

so use return d[tobeselected] instead of d.tobeselected

When you use d.tobeselected , javascript will look out for a actual property named tobeselected on the d object (which does not exist) and not a property name equal to the value of the variable tobeselected