I am facing a challenge with utilizing a Json array in my template file. To access specific elements of the array, I need to use a scope variable. While I can achieve this in the controller, I also require the same functionality in the HTML file.
An excerpt from my array is provided 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: { ... }
}
In my scenario, I have a scope variable $scope.currentDevice that changes based on the user's selection (e.g., fitbit, jawbone). In the controller, I can retrieve the correct data using
$scope.wearables[currentDevice]['week']['distance']The challenge lies in accessing
wearables[currentDevice]['week']['distance']When attempting
{{wearables[currentDevice]['week']['distance']}}{{wearables['fitbit']['week']['distance']}}Is there a way to achieve this approach for displaying array data, and if so, how can it be implemented?
The desired format for showcasing the array data is to visualize it in a graph as depicted 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 switching to
<canvas id="bar" class="chart chart-bar" chart-data="wearables['fitbit']['week']['distance']" chart-labels="labels" chart-series="series" chart-options="options" ></canvas>
this arrangement functions as intended.