Is it possible to access an array in html using a scope variable?

Question

I have a Json array that I want to use in my template file, but to access certain elements of the array I need to use a scope variable. I can do something like this in the controller, but I need to do it in the html file.

Part of my array is shown below:

{
fitbit: {
    selected: true,
    user_id: "10537",
    today: [
        {
            date: "Tue, 10 Jan 2017",
            distance: 0,
            steps: 0,
            calories: "0"
        }
    ],
    week: {
        distance: [
            ["0","0","0","0","0"]
        ],
        labels: ["Wed 4th","Thu 5th","Fri 6th","Sat 7th","Sun 8th"],
        steps: [
            ["0","0","0","0","0"]
        ]
    }
},
jawbone: { ... }
}

I have a scope variable $scope.currentDevice that will change depending on what option the user picks so fitbit, jawbone, etc. In the controller I can control which data to access using $scope.wearables[currentDevice]['week']['distance'] so that it gets the correct data using the variable currentDevice.

I need to access wearables[currentDevice]['week']['distance'] in the template html file but without using ng-repeat and I need to use the scope variable currentDevice to to decide which data to show.

Whenever I try {{wearables[currentDevice]['week']['distance']}} in the html file it shows nothing but if I try {{wearables['fitbit']['week']['distance']}} it show the value.

Is it possible to show the array data this way and if so how would i do it?

The array data I want to show needs to be displayed in a graph like below where chart-data changes

<canvas id="bar" class="chart chart-bar" chart-data="wearables[currentDevice]['week']['distance']" chart-labels="labels" chart-series="series" chart-options="options" ></canvas>

if i change it to

<canvas id="bar" class="chart chart-bar" chart-data="wearables['fitbit']['week']['distance']" chart-labels="labels" chart-series="series" chart-options="options" ></canvas>

it works fine

currentDevice is change using a dropdown option - i've got it to change depending on what is chosen from the dropdown — AN11
– AN11, Commented Jan 10, 2017 at 18:11
I'm guessing, my angular is rusty, but this could happen because once you change it, you need to signal to angular that your page needs updating/recompiling. Take a look at $scope.$apply() in conjunction with ng-change. — ZombieTfk
– ZombieTfk, Commented Jan 10, 2017 at 18:42

AN11 · Accepted Answer · 2017-01-11 13:47:55Z

0

To display the correct data in the graph, I've used a function. Instead of trying to display data with wearables[currentDevice]['week']['distance'] i'm using getDistance(currentDevice) to return the correct data

the graph code becomes:

<canvas id="bar" class="chart chart-bar" chart-data="getDistance(currentDevice)" chart-labels="labels" chart-series="series" chart-options="options" ></canvas>

and in the controller the getDistance(device) method is where the data changes depending on what $scope.currentDevice is:

$scope.getDistance = function(device) {
    console.log('current device', device );
    return $scope.wearables[device]['week']['distance'];
}

answered Jan 11, 2017 at 13:47

AN11

3243 silver badges12 bronze badges

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

Comments

theaccordance · Accepted Answer · 2017-01-11 15:27:13Z

-2

Depending on what's actually driving your chart, it's possible that the chart-data attribute isn't being evaluated properly. Try changing chart-data to ng-attr-chart-data and see if that works:

<canvas id="bar" class="chart chart-bar" ng-attr-chart-data="wearables[currentDevice]['week']['distance']" chart-labels="labels" chart-series="series" chart-options="options" ></canvas>

Information about ngAttr: https://docs.angularjs.org/guide/interpolation

edited Jan 11, 2017 at 15:27

answered Jan 10, 2017 at 18:42

theaccordance

8895 silver badges13 bronze badges

4 Comments

ZombieTfk Over a year ago

He wants not to use ng-repeat.

theaccordance Over a year ago

I'll update the answer when he provides more context on the template behavior he's looking to achieve

AN11 Over a year ago

i want to display wearables[currentDevice]['week']['distance'] as the chart-data for my bar chart

<canvas id="bar" class="chart chart-bar" chart-data="wearables[currentDevice]['week']['distance']" chart-labels="labels" chart-series="series" chart-options="options" ></canvas

theaccordance Over a year ago

Revised the answer, give that a try please.

Collectives™ on Stack Overflow

Is it possible to access an array in html using a scope variable?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related