Angular - getting value of certain key in $scope

Question

I'm trying to create a simple application using Meteor/Angular/TypeScript/mongoDB. The plan is to draw charts according to data coming out of a database. It's looking like this:

export const Database = new Mongo.Collection('servers');
var app = angular.module('monitor', [

    'chart.js', 
    'angular-meteor', 
    'ui.router'

]);

app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/login');

    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'client/login.html',
            controller: 'loginCtrl'
        })
        .state('register', {
            url: '/register',
            templateUrl: 'client/register.html',
            controller: 'registerCtrl'
        })
        .state('monitor', {
            url: '/monitor',
            templateUrl: 'client/monitor.html',
            requireLogin: true,
            controller: 'monitorCtrl'
        });
}]);

Creating users, logging in, redirecting to the right page etc. works fine so I will leave those parts out. Now I'm trying to create canvas for each object in my database collection.

app.controller('monitorCtrl', ['$scope', '$meteor',
function($scope, $meteor) {

    $scope.servers = $meteor.collection(Database);

    angular.forEach($scope.servers, function(value, key) {

        var canvas = document.createElement('canvas');
        canvas.setAttribute('id', $scope.servers['hostname']);
        canvas.setAttribute('width', '350');
        canvas.setAttribute('height', '250');
        canvas.setAttribute('style', 'border:1px solid #000000');

        document.getElementById('test').appendChild(canvas);
    })
}]);

So far so good. The connection to my database is working. When I display {{ servers }} on the HTML site I get what I expect. An array of objects with a bunch of key/value pairs. Looking like this:

[{"hostname":"debian",
"ip":"127.0.0.1",
"latency":18.843,
"totalmemory":4156395520,
"usedmemory":1982562304,
"_id":{"_str":"590c2e0332f6128b9300a25f"}},
{"hostname":"dummy1",
"ip":"127.0.0.2",
"latency":"30.000",
"totalmemory":"8392102837",
"usedmemory":"3938462793",
"_id":{"_str":"591558e2155d4e3702f89a05"}},
{"hostname":"dummy2",
"ip":"127.0.0.3",
"latency":"12.000",
"totalmemory":"4873615238",
"usedmemory":"1835263846",
"_id":{"_str":"59155948155d4e3702f89a06"}}]

The canvas also get created but I have no clue how to access the value of a certain key inside those objects. The ids of the canvas are "undefined". But I'm trying to get them to be the value of 'hostname' for each object. How do I do that? I read a few topics about related problems but it seems to me like I'm missing some simple basic knowledge here.

Answer 1

The value passed to the function is the variable that holds the current element of the big array you're iterating on, So at each iteration, it changes to point to an element of that array.

Try this:

 angular.forEach($scope.servers, function(value, key) {
    var canvas = document.createElement('canvas');
    canvas.setAttribute('id', value.hostname);
    canvas.setAttribute('width', '350');
    canvas.setAttribute('height', '250');
    canvas.setAttribute('style', 'border:1px solid #000000');

    document.getElementById('test').appendChild(canvas);
})