无法从外部 JSON 文件读取数据：Ionic

Question

我已经在一个名为ionic-config.JSON 的 JSON 文件中配置了所有 URL。数据是这样的

[
    {
        "db_url": "http://localhost:3000/users/"
    }
]

我正在尝试使用GET 方法读取数据。

url: string = '../ionic-config/ionic-config.json';
this.http.get(this.url).subscribe( (data: any) => {
      this.db_url = data;
    })

但我收到一个错误，因为 404 找不到

GET http://localhost:8100/ionic-config/ionic-config.json 404 (不是 找到）

文件在目录src/ionic-config/ionic-config.json

Answer 1

您的路径似乎有问题。

试试这个：

url: string = 'ionic-config/ionic-config.json';

另外，您分配 db_url 值的逻辑是错误的。您正在分配整个数组，而不是数组中特定对象的字段。改用这个：

this.db_url = data[0].db_url;

Answer 2

您不需要向同一台服务器发出 http 请求。在您的应用程序中使用 JSON 文件：

例如，如果您的 JSON 文件位于 /src/pages/YourPage/myJson.json 中，则转到您的 YourPage.ts（与您的 JSON 位于同一文件夹中）并说 import * as jsonData from './myJson.json';

现在您可以将其用作普通 JSON 对象而无需对其进行解析。

例如：（因为你的 JSON 是一个对象数组）：

console.log(jsonData[0].db_url);

Answer 3

您可以选择以下任何一种方式。

1。使用 API 调用

一个。只需将 ionic-config.json 文件移动到 assets 文件夹以获得更好的代码流。然后像这样进行 api 调用。

return this.http.get('assets/ionic-config.json')
    .map(res=> return res.json);

b.在您的.ts file 中订阅这样的 api 调用

<method_name_in_service_file>.subscribe(resp=>{
 this.db_url = resp;
},error=>{
   console.log(error)
})

2。直接从 ionic-config 文件导入

喜欢这个

import * as dbUrl from '<path to the config file>'

你会得到来自dbUrl[0].db_url的url