从Angular 5中的本地文件到Typescript数组的JSON数组

Question

I am using Angular 5 to develop a web app. I have JSON file which looks like this:

[
  {
        "id": 0,
        "title": "Some title"
  },
  {
        "id": 1,
        "title": "Some title"
  },
  ...
]

This file is stored locally. I also have an interface:

export interface Book {
  id: number;
  title: string;
}

The questions are how do I:

1. Fetch the data from the file?
2. Create an array of type Book[] from this data?

Answer 1

You could load the file with import :

import data from 'path/to/data.json';

And assign that to an array of type Book[] :

@Component({...})
class Foo {
   books: Book[] = data;
}

demo

Also add a wildcard module definition in src/typings.d.ts to tell the TypeScript compiler how to import *.json :

declare module "*.json" {
  const value: any;
  export default value;
}