如何通过 Angular4 HTTP Get 从 JSON 文件中访问单个元素？答案

【问题标题】：How can I access an individual element from JSON file via Angular4 HTTP Get?如何通过 Angular4 HTTP Get 从 JSON 文件中访问单个元素？
【发布时间】：2018-07-27 20:25:58
【问题描述】：

我的 JSON 文件结构如下：

 [
    {id: 1,
     title: "First Element"
    },
    {id: 2,
     title: "Second Element"
    },
    {id: 3,
     title: "Third Element"
    }
 ]

我已经能够通过调用类似的方法成功检索整个 JSON 数组（文件）

组件.ts：

this.dataService.getAll()
    .subscribe(
        (data: Book[]) => this.myData = data,
        (err: any) => console.log(err)
    );

服务.ts

getAll(): Observable<any> {
    return this.http.get<any>(this.apiURL)

其中 apiURL 是我的库中本地 json 文件的路径。如果可能，我怎样才能只获得 id 为 1 且标题为“第一个元素”的第一个元素？

我一直在尝试这个：

getBookById(title: String) Observable<Book> {
    return this.http.get<Book>(this.apiURL + `/${title}`)

除了使用 Book 而不是 Book[] 之外，使用相同的 component.ts 方法。但它失败并出现 HTTPGet 错误，说它找不到它。这是有道理的，因为我觉得我在标题和 URL 之间缺少一个字段（用于访问或解析每个元素），但是我缺少一些语法还是其他什么？感谢您的帮助和时间。

【问题讨论】：

您调用的后端是否允许按标题检索书籍？如果后端不理解你传递给它的 URL，它会产生一个 not found 错误。
因此，目前 JSON 数据存储在我的 Angular 项目目录中的本地文件中，例如“../../assets/data/topics.json”，这就是 apiURL 所指的内容。

标签： angular http get rxjs

【解决方案1】：

我刚刚重读了你的帖子（也许你更新了它），它特别说你正在阅读一个 JSON 文件。所以我假设该文件在客户端是本地的。

如果是这样，则无法使用 http 从 JSON 文件中检索单个元素。您只能读取整个文件。

您可以然后将结果过滤为您想要的结果或在数组中找到一个。

例如，这是我的一个：

products.find(p => p.productId === id))

这会通过 id 找到特定产品，其中 products 是我检索到的数组。

【讨论】：