angular table not displaying json

[balmy hull]

so I'm trying to make a crud application without bootstrap or an API. I have a json I want to be able to read, delete and update from but I cant get my application to just display my pseudo assignments in my json it has no errors but my table isn't populating here is my components typescript

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatTableModule, MatTable } from '@angular/material/table';
import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
import { AssignmentsService } from '../assignments.service';
import { AssignmentI } from '../assignment-i';
import { HttpClientModule } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-assignment-table',
  templateUrl: './assignment-table.component.html',
  styleUrls: ['./assignment-table.component.css'],
  standalone: true,
  imports: [MatTableModule, MatPaginatorModule, HttpClientModule],
  providers: [AssignmentsService]
})
export class AssignmentTableComponent implements AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatTable) table!: MatTable<AssignmentI>;

  displayedColumns: string[] = ['assignment_name', 'class', 'type', 'due_date'];
  dataSource: AssignmentI[] = []; 

  constructor(private assignmentsService: AssignmentsService) {}

  ngAfterViewInit(): void {
    this.assignmentsService.getAssignment()
      .subscribe(assignments => {
        this.dataSource = assignments;
      });
  }
}```
this is my service as well

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { AssignmentI } from './assignment-i';

@Injectable({
providedIn: 'root',
})
export class AssignmentsService {
private http = inject(HttpClient);

public getAssignment(): Observable<AssignmentI[]> {
return this.http.get<AssignmentI[]>('assets/assignments.json');
}
}

I ran out of words my interface matches everything I’m not sure what I did wrong I haven’t implemented crud yet but I’m working on it if I can just get my table to display my html looks fine as well I don’t know what to Google to find a solution

[gloomy acorn]

without showing the error or the stack trace its hard to say what's wrong. what version of Angular are you using? To read JSON with newer versions of angular you can add

"compilerOptions": {
    ...
    "resolveJsonModule": true
  }

to your tsconfig.json file and then you can import your json data directly into typescript with

import { yourJsonList } from '../assets/assignment.json

see here for reference: https://stackoverflow.com/questions/46991237/how-to-import-json-file-into-a-typescript-file

For other CRUD operations I would suggest using a database. You cannot modify server-side files from a client-side app like Angular. here are some other options: https://stackoverflow.com/questions/30288087/is-it-possible-to-write-data-to-a-locally-json-file-with-nothing-but-angular