DOM element error

Question

I've this code:

aebdApp.controller('datafileController', function ($scope, $http) {
    $http.get('http://127.0.0.1:8084/json/datafiles.json').then(function (response) {
        $scope.datafile = response.data;

        $scope.datafile.items.forEach(function (i, index) {
            var data = [{
                values: [i.used_mb, i.free_mb],
                labels: ['Used MB', 'Free MB'],
                type: 'pie'
            }];
            Plotly.plot('myDiv_' + index, data);
        });
    });
});

JSON:

  {
"items": [
  {
    "file_id": 15,
    "datafile_name": "/u01/app/oracle/product/12.2/db_1/dbs/u01apporacleoradataorcl12orclaebd_tables_0",
    "tablespace_name": "SYSTEM",
    "total_mb": 20,
    "used_mb": 19,
    "free_mb": 0,
    "percentage_used": 95,
    "timestamp": "2017-12-31T01:58:35.201Z",
    "links": [
      {
        "rel": "self",
        "href": "http://localhost:8080/ords/mic/datafiles/15"
      }
    ]
  },
  {
    "file_id": 13,
    "datafile_name": "/u01/app/oracle/oradata/orcl12c/orcl/APEX_1941389856444596.dbf",
    "tablespace_name": "SYSTEM",
    "total_mb": 8,
    "used_mb": 6,
    "free_mb": 1,
    "percentage_used": 75,
    "timestamp": "2017-12-31T01:58:35.224Z",
    "links": [
      {
        "rel": "self",
        "href": "http://localhost:8080/ords/mic/datafiles/13"
      }
    ]
  },
  {
    "file_id": 17,
    "datafile_name": "/u01/app/oracle/product/12.2/db_1/dbs/u01apporacleoradataorcl12orclassignment_ta",
    "tablespace_name": "ASSIGNMENT_TABLES",
    "total_mb": 200,
    "used_mb": 0,
    "free_mb": 198,
    "percentage_used": 0,
    "timestamp": "2017-12-31T01:58:35.241Z",
    "links": [
      {
        "rel": "self",
        "href": "http://localhost:8080/ords/mic/datafiles/17"
      }
    ]
  },
  {
    "file_id": 10,
    "datafile_name": "/u01/app/oracle/oradata/orcl12c/orcl/sysaux01.dbf",
    "tablespace_name": "SYSAUX",
    "total_mb": 1160,
    "used_mb": 1103,
    "free_mb": 55,
    "percentage_used": 95,
    "timestamp": "2017-12-31T01:58:35.257Z",
    "links": [
      {
        "rel": "self",
        "href": "http://localhost:8080/ords/mic/datafiles/10"
      }
    ]
  },
  {
    "file_id": 9,
    "datafile_name": "/u01/app/oracle/oradata/orcl12c/orcl/system01.dbf",
    "tablespace_name": "SYSTEM",
    "total_mb": 350,
    "used_mb": 345,
    "free_mb": 4,
    "percentage_used": 98,
    "timestamp": "2017-12-31T01:58:35.267Z",
    "links": [
      {
        "rel": "self",
        "href": "http://localhost:8080/ords/mic/datafiles/9"
      }
    ]
  },
  {
    "file_id": 11,
    "datafile_name": "/u01/app/oracle/oradata/orcl12c/orcl/undotbs01.dbf",
    "tablespace_name": "UNDOTBS1",
    "total_mb": 380,
    "used_mb": 195,
    "free_mb": 20,
    "percentage_used": 51,
    "timestamp": "2017-12-31T01:58:35.275Z",
    "links": [
      {
        "rel": "self",
        "href": "http://localhost:8080/ords/mic/datafiles/11"
      }
    ]
  },
  {
    "file_id": 12,
    "datafile_name": "/u01/app/oracle/oradata/orcl12c/orcl/users01.dbf"
  }...

And the html:

<div id="myDiv_{{$index}}"></div>

But this code has an error and I don't know what is (AngularJS noob). The chart is not rendered.

The console gives the following error:

Error: No DOM element with id 'myDiv_0' exists on the page.

Check your HTML output and make sure the element exists. Also, test to make sure the element exists before this code is run. — Collin G., Jan 02 '18 at 00:40
can you post the `html` you have around your div with id `myDiv_{{$index}}`? you should have `ng-repeat` there I assume. — margaretkru, Jan 02 '18 at 00:45
Probably you need to call `$scope.$apply();` method cause your code is out of angular's context. Try to call that method after this line `$scope.datafile = response.data;` — Ele, Jan 02 '18 at 00:52

score 3 · Accepted Answer · answered Jan 02 '18 at 01:04

The reason for the error might be that when you call Plotly.plot your view hasn't been rendered yet, so there is no div with id myDiv_0. You can use the event $viewContentLoaded (more info angular docs), like this:

function(response) {
    $scope.datafile = response.data;

    $scope.$on('$viewContentLoaded', function(event) { 
       // code that will be executed when this view is loaded
       $scope.datafile.items.forEach(function (i, index) {
           var data =[{
               values: [i.used_mb,i.free_mb],
               labels: ['Used MB', 'Free MB'],
               type: 'pie'
           }];
           Plotly.plot('myDiv_'+index,data);
       });
    });    
 });

Alternatively you can use ready and wrap it around the code that access DOM (Plotlu.plot in your case), like this:

angular.element(document).ready(function () {
    // Your document is ready, call Plotly.plot here
});

For more info check this SO question.

score 0 · Answer 2 · answered Jan 02 '18 at 00:59

First: Check if the ng-repeat is rendering your desired HTML.

Second: If the HTML is being rendered as expected, try the following:

aebdApp.controller('datafileController', function ($scope, $http) {
    $http.get('http://127.0.0.1:8084/json/datafiles.json').then(function (response) {
        $scope.datafile = response.data;

        $scope.$apply(function () { // <-- This is the apply method
            $scope.datafile.items.forEach(function (i, index) {
                var data = [{
                    values: [i.used_mb, i.free_mb],
                    labels: ['Used MB', 'Free MB'],
                    type: 'pie'
                }];
                Plotly.plot('myDiv_' + index, data);
            });
        });
    });
});

DOM element error

2 Answers2