How to implement datasource for a datatable in Angular 5 - json

Question

I been trying to follow all the tutorials, and answers that I have found and I just can't make it work yet. Any help is appreciated it. I got this error:
Error: Provided data source did not match an array, Observable, or DataSource
And this is the JSON response I get from the server:
{receivedDate: "2018-05-22T00:00:00", id: "27280371", companyName: "Dark&Stormy", documentType: 11, receipts: Array(1), …}
And this is my code:
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup, FormControl } from '#angular/forms';
import { HttpClient, HttpHeaders, HttpRequest, HttpEventType, HttpResponse } from '#angular/common/http';
import { Router, ActivatedRoute, ParamMap } from '#angular/router';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';
import { DataSource } from '#angular/cdk/collections';
import { MatPaginator, MatSort, MatTableDataSource } from '#angular/material';
import { myService } from './../../../api';
import { InputService } from './../input.service';
import { IReceipt } from './../models/receipt.model';
#Component({
selector: 'app-submission-details',
templateUrl: './submission-details.component.html',
styleUrls: ['./submission-details.component.css']
})
export class SubmissionDetailsComponent implements OnInit {
setPaymentMethodForm: FormGroup;
submissionList = [];
errorMessage: string;
private documentId;
receipt: IReceipt;
dataSource = new MatTableDataSource();
displayedColumnsReceipt = ['id', 'fromDate', 'pReference', 'pMethod', 'status', 'valid', 'receipt'];
constructor(
private client: myService.Client,
private fb: FormBuilder,
private inputService: InputService,
private router: Router,
private activatedRoute: ActivatedRoute
) {
this.createForm();
activatedRoute.data
.subscribe(
data => this.documentId = data[this.documentId]
);
}
id: string;
private document: any;
ngOnInit() {
this.activatedRoute.params.subscribe(params => {
if (params['id']) {
this.id = params['id'];
console.log('paramsId: ', this.id);
this.inputService.getDocumentId(this.id)
.subscribe(res => {
this.dataSource = res;
console.log('sub-details.res: ', res);
});
}
});
}
getSubmissionDetails(string): void {
this.client.apiSubmissionGetSubmissionDocumentGet('documentId')
.subscribe(
data => {
this.submissionList = this.submissionList;
console.log('data: ', data);
},
(error: any) => this.errorMessage = <any> error);
}
createForm() {
this.setMethodForm = this.fb.group({
documentId: '',
receiptType: ''
});
}
}

Answer 1

Here
this.dataSource = res;
Whats res? Is it array? If so then
this.dataSource.data = res;