Storing Arrays in an external file in Angular

Question

I'm attempting to create an external JSON file that I can use to hold key value pairs, where there is a key and then an array.

I'm making effectively a ticket/issue tracking system, and I have a different component for issue list, report issue, edit issue, ect. I'd like to have the pre-defined lists pulled from an asset JSON file.

I've done this with just a list of fake issues, and it works great! Where I'm struggling is when I try and do nested lists that you can get at using key value pairs. I'll include both below.

fakeIssues.json

[
  {
  "issueID": 1,
  "issueStatus": "Open",
  "issueSummary": "Summary 1",
  "issueDescription": "Description 1",
  "issueSeverity": "Cosmetic",
  "issuePriority": "Low",
  "issueReporter": "Anthony",
  "issueWorker": "Carston"
},
  {
  "issueID": 2,
  "issueStatus": "Open",
  "issueSummary": "Summary 1",
  "issueDescription": "Description 1",
  "issueSeverity": "Cosmetic",
  "issuePriority": "Low",
  "issueReporter": "Anthony",
  "issueWorker": "Carston"
  },
  {
  "issueID": 3,
  "issueStatus": "Open",
  "issueSummary": "Summary 1",
  "issueDescription": "Description 1",
  "issueSeverity": "Cosmetic",
  "issuePriority": "Low",
  "issueReporter": "Anthony",
  "issueWorker": "Carston"
  },
  {
  "issueID": 4,
  "issueStatus": "Open",
  "issueSummary": "Summary 1",
  "issueDescription": "Description 1",
  "issueSeverity": "Cosmetic",
  "issuePriority": "Low",
  "issueReporter": "Anthony",
  "issueWorker": "Carston"
  }
]

issueAssets.json

[
  {
    "name": "statusList",
    "array": ["Open", "In Progress", "Blocked", "In Review", "Done", "Obsolete"]
  },
  {
    "name": "statusList",
    "array": ["Low", "Medium", "High"]
  },
  {
    "name": "severityList",
    "array": ["Critical", "Major", "Moderate", "Minor", "Cosmetic"]
  }
]

issue.service.ts

private issueUrl = 'assets/fakeIssues.json';
private issueAssets = 'assets/issueAssets.json';

constructor(private http: HttpClient) {}

  getIssues(): Observable<Iissue[]> {
    return this.http.get<Iissue[]>(this.issueUrl)
      .pipe(
        tap(data => console.log('All: ', JSON.stringify(data))),
        catchError(this.handleError)
      );
  }

  getOpenIssues(): Observable<Iissue[]> {
    return this.getIssues()
      .pipe(
        map((issues: Iissue[]) => issues.filter(i => (i.issueStatus !== "Closed")))
      );
  }

getAssets(): Observable<any> {
    return this.http.get<any>(this.issueAssets)
      .pipe(
        tap(data => console.log('All: ', JSON.stringify(data))),
        catchError(this.handleError)
      );
  }

getStatusList(): Observable<any> {
    return this.getAssets()
      .pipe(
        map((assets: Map<string, string[]>) => assets.get("statusList"))
      );
  }

issues.component.ts

sub!: Subscription;
sub2!: Subscription;
issues: Iissue[] = [];
assets: Map <string, string[]>;
statusList: string[];

constructor(private issueService: IssueService) {}

  ngOnInit(): void {

    this.sub = this.issueService.getOpenIssues().subscribe({
      next: issues => {
        this.issues = issues;
      },
      error: err => this.errorMessage = err
    });

    this.sub2 = this.issueService.getStatusList().subscribe({
      next: statusList => {
        this.statusList = statusList;
      },
      error: err => this.errorMessage = err
    });

    /*
    this.sub2 = this.issueService.getAssets().subscribe({
      next: assets => {
        this.assets = asset;
        this.statusList = this.assets.get("statusList");
      },
      error: err => this.errorMessage = err
    });
    */
  }

One thing I could do is to create an interface like I did with issues.

I'm taking this as a learning opportunity, and trying to figure out how I would go about doing this without an interface, and it's just stumping me. I've searched google and can't find anything, but it's also very likely that I am not searching right since I'm new to Angular/Spring Boot and it's terminology.

I'm thinking I may move try and make different functions within issue.service.ts for getStatusList() and getPriorityList(), but first I need to figure out how to get at that data.

Thanks for your help!!

Answer 1

I was WAYYYYY over complicating things. I found another solution.

issue.service.ts

  severityList: string[] = [
    'Critical',
    'Major',
    'Moderate',
    'Minor',
    'Cosmetic'
  ];
  priorityList: string[] = [
    'Low',
    'Medium',
    'High'
  ];
  statusList: string[] = [
    'Open',
    'In Progress',
    'Blocked',
    'In Review',
    'Done',
    'Obsolete'
  ];

issues.component.ts

ngOnInit(): void {    
    this.statusList = this.issueService.statusList;
}