如何獲取 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
}