如何获取 JSON 文件的数据（打字稿）

Question

嗨，我在尝试了解如何获取 JSON 文件的数据时遇到了一点困难。

环境.ts：

    export const environment = {
  production: false,
  urlListBooks: "/assets/list-books.json",
  urlGetBooks: "/assets/edit-book.json?:id",
  urlGetTags: "/assets/edit-book.json?:tags",
  urlPostBooks: "/assets/edit-book.json",
  urlListTags: "/assets/list-tags.json",
  urlPostTags: "/assets/edit-tag.json"
};

编辑书.json：

"book":{
    "id": 1,
    "title": "The Shining",
    "authorId": 1,
    "tags": [{"name":"new"}, {"name":"test"}]
},
"authors":[
    {
        "id": 1,
        "prename": "Stephen",
        "surname": "King"
    },
    {
        "id": 3,
        "prename": "Algernon",
        "surname": "Blackwood"
    },
    {
        "id": 4,
        "prename": "Edgar Allan",
        "surname": "Poe"
    },
    {
        "id": 5,
        "prename": "Howard Phillips",
        "surname": "Lovecraft"
    }
],
"tags":[
    {
        "name": "new"
    },
    {
        "name": "Horror"
    },
    {
        "name": "Romance"
    }
]

}

服务：

  getBookTags(n: String) Observable<Tag[]>{
    return this.http.get<Tag[]>(environment.urlGetTags.)
  }

我想要 getBookTags(n: String) 做的是返回在 edit-book.json 中定义的标题为 n 的书的标签数组（例如“tags”：[{“name”：“new”}，{“name ":"Horror"}] ) 这样我以后就可以使用 function 检查一本书有哪些标签和 select 它们。

非常感谢您的帮助:)

Answer 1

好的，我想我已经为您解决了这个问题，我将与您一起完成我的流程，以便您了解目标是什么。 你可以在这里看到我的解决方案： https://codesandbox.io/s/thirsty-minsky-g6959f?file=/assets/edit-book.json:0-752

首先，您提供的 JSON 并没有多大意义，它显示了多个作者和一本“书”。 我认为你想要多本书。 其次，它必须用大括号包裹起来，如下所示：

{
  "books": [
    {
      "id": 1,
      "title": "The Shining",
      "authorId": 1,
      "tags": [{ "name": "new" }, { "name": "test" }]
    },
    {
      "id": 2,
      "title": "The Wendigo",
      "authorId": 2,
      "tags": [{ "name": "Horror" }]
    }
  ],
  "authors": [
    {
      "id": 1,
      "prename": "Stephen",
      "surname": "King"
    },
    {
      "id": 3,
      "prename": "Algernon",
      "surname": "Blackwood"
    },
    {
      "id": 4,
      "prename": "Edgar Allan",
      "surname": "Poe"
    },
    {
      "id": 5,
      "prename": "Howard Phillips",
      "surname": "Lovecraft"
    }
  ],
  "tags": [
    {
      "name": "new"
    },
    {
      "name": "Horror"
    },
    {
      "name": "Romance"
    }
  ]
}

现在，在您的 Typescript 代码中，我们希望为您要获取的 json 打字。 这将使您的代码更具可读性，它会为您提供智能感知，并帮助您在尝试运行代码之前捕获一些错误。 所以我们先到 go，然后键入 JSON 的属性，如下所示：

type Tag = {
  name: string;
};

type Book = {
  id: number;
  title: string;
  authorId: number;
  tags: Tag[];
};

type Author = {
  id: number;
  prename: string;
  surname: string;
};

type BookData = {
  books: Book[];
  authors: Author[];
  tags: Tag[];
};

基本上我所说的是我们有由书籍、作者和标签组成的书籍数据。 书籍在 Book 类型下具有属性，与 Author 和 Tag 相同。

现在对于实际运行的代码，我们将使用 fetch api 来获取 url 处的 json 数据。

async function getBookTags(n: string): Promise<Book[]> {
  return fetch(url)
    .then<BookData>((res) => res.json())
    .then((data) => data.books)
    .then((books) => books.filter((b) => doesBookHaveTag(b, n)));
}

我们做的第一件事是从 api 中获取数据，这将返回一个 promise，当它被解析时（这就是然后所做的）我们获取响应并将其解析为 json。然后当 promise 解析时我们得到数据中的书籍. 然后当 promise 解析时，我们过滤具有匹配标签的书籍。

doesBookHaveTag只是我定义的一个小帮手 function ：

function doesBookHaveTag(book: Book, n: string): boolean {
  // just return if book has at least one tag matching n
  return book.tags.some((t) => t.name.toLowerCase() === n.toLowerCase());
}

如果你不理解 promises 你应该看一些关于它的视频，但基本上浏览器发出一个 http 请求，然后当它解析时它排队一个任务来执行 function [见尾注] in.then 有时间的时候。 因此，当我们想调用您的异步 function 并说记录所有带有标签“恐怖”的书籍时，我们会按如下所示进行操作：

getBookTags("horror").then(console.log); // returns the one book.

我希望这是有道理的，您可以了解如何获取数据、如何处理它返回的 promise 以及如何键入您的响应。 我唯一不确定的是 Angular 如何为您更改此设置（我是一个 React 人），但这实际上只是非库特定的 Javascript/Typescript。

[尾注] 当我说 function in.then 时，我的意思是 .then(data => data.books) 将 function 传递给 the.then function。data => data.books 实际上是一个 function，与：

function(data: BookData): Book[] {
    return data.books
}