title: ERROR TypeError: Cannot read property 'data' of undefined
body: <p>I'm new to angular and mongodb. I'm trying to pull data from MongoDB and display it in an Angular Material Table. 
  But i got a error </p>
  
  <p>"ERROR TypeError: Cannot read property 'data' of undefined" </p>
  
  <p>when i tried to open the app and the data from MongoDB won't load.
  I manage to narrow down the problem that is something to do with this line.</p>
  
  <pre><code>return this.myservice.GetList().subscribe(res =&gt; this.dataSource.data = res["0"]["data"]);
                                                                                  ^^^^^^^^
  </code></pre>
  
  <p>Thanks in advance!</p>
  
  <p><strong>tabledata.component.ts</strong></p>
  
  <pre><code>import {BackendService} from './../backend.service';
  import {Component, OnInit, ViewChild} from '@angular/core';
  import {MatPaginator} from '@angular/material/paginator';
  import {MatSort} from '@angular/material/sort';
  import {MatTableDataSource} from '@angular/material/table';
  
  
  @Component({
    selector: 'tabledata',
    templateUrl: './tabledata.component.html',
    styleUrls: ['./tabledata.component.css']
  })
  
  export class TabledataComponent implements OnInit {
    displayedColumns = ['S_NAME', 'S_ADD', 'S_STATUS'];
    dataSource = new MatTableDataSource();
  
    @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
    @ViewChild(MatSort, {static: true}) sort: MatSort;
  
    constructor(private myservice: BackendService) {
    }
  
  
  
    ngOnInit() {
  
      return this.myservice.GetList().subscribe(res =&gt; this.dataSource.data = res["0"]["data"]);
  
    }
  
    ngAfterViewInit() {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }
  
    applyFilter(filterValue: string) {
      this.dataSource.filter = filterValue.trim().toLowerCase();
  
      if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
      }
    }
  }
  </code></pre>
  
  <p><strong>MongoDB Data in sitelist Collection</strong></p>
  
  <pre><code>{
      "_id" : ObjectId("5ec4672e44f01dcae82c3dde"),
      "error" : "0",
      "num_rows" : 3,
      "data" : [ 
          {
              "S_NAME" : "SBOBETH",
              "S_ADD" : "sbobeth.com",
              "S_STATUS" : "UP"
          }, 
          {
              "S_NAME" : "GTRCASINO",
              "S_ADD" : "gtrcasino.com",
              "S_STATUS" : "DOWN"
          }, 
          {
              "S_NAME" : "SBOBETH",
              "S_ADD" : "sbobeth.com",
              "S_STATUS" : "DOWN"
          }, 
          {
              "S_NAME" : "GTRBETCLUB",
              "S_ADD" : "gtrbetclub.com",
              "S_STATUS" : "UP"
          }, 
          {
              "S_NAME" : "77UP",
              "S_ADD" : "77up.bet.com",
              "S_STATUS" : "UP"
          }, 
          {
              "S_NAME" : "DATABET88",
              "S_ADD" : "databet88.net",
              "S_STATUS" : "DOWN"
          }, 
          {
              "S_NAME" : "FAFA855",
              "S_ADD" : "fafa855.com",
              "S_STATUS" : "UP"
          }
      ]
  }
  </code></pre>
  
  <p><strong>backend.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpResponse, HttpHeaders, HttpRequest  } from "@angular/common/http";
  import { catchError, map, tap,  } from 'rxjs/operators';
  
  @Injectable({
    providedIn: 'root'
  })
  export class BackendService {
  
    constructor(private _http: HttpClient) { }
  
    GetList() 
    {
  
      return this._http.get('http://localhost:3000/api/getList')
  
    }
  
    private handleError&lt;T&gt;(operation = 'operation', result?: T)
    {
      console.log("error");
      return null;
    }
  
    private log(message: string)
    {
      console.log("log");
    }
  
  }
  </code></pre>
  
  <p><strong>server.js</strong></p>
  
  <pre><code>const express = require('express');
  const bodyParser = require('body-parser');
  const app = express();
  var mongoose = require('mongoose');
  require('./db')                                                                         
  const SLDBModel = require('./sldbreply_schema');                                        
  
  app.use(bodyParser.urlencoded({ extended: true }));
  app.use(express.urlencoded({ extended: true }))
  
  app.use(function (req, res, next)
  {
      res.setHeader('Access-Control-Allow-Origin','*');
      res.setHeader('Access-Control-Allow-Methods','GET, POST, PUT, DELETE');
      res.setHeader('Access-Control-Allow-Headers','content-type, x-access-token');
      res.setHeader('Access-Control-Allow-Credentials', true);
      next();
  });
  
  app.get('/api/getList', function(req, res){
      SLDBModel.find({},function(err,data){
          if(err)
          {
              res.send(err);
          }
          else
          {
              res.send(data);
          }
      });
  })
  
  app.listen(3000, ()=&gt;
  {
      console.log("SERVER IS ONLINE!");
  })
  </code></pre>
  
  <p>After i tried console.log(res); from suggestion in the comment to check my 'res' data first. </p>
  
  <p><a href="https://i.stack.imgur.com/jrTpL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jrTpL.png" alt="enter image description here"></a></p>
  
  <p>and from server.js i tried console.log(data);</p>
  
  <p><a href="https://i.stack.imgur.com/kuzkK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kuzkK.png" alt="enter image description here"></a></p>
  
  <p>Both of them return [] not sure what this mean
  Any suggestion on how to fix?</p>