在angular中,如何引用本地json文件并显示?

镜亦亦
  • 21

因为才开始学习angular,想做个小demo,拿取json文件并显示在前端页面中。
但是对于这块有点不懂,angular的官方文档,在引用这块,这看的不是很懂。
希望有一些文章推荐或者demo。

回复
阅读 894
5 个回答

把json文件改为js文件并且export出去这个json对象,然后在你需要的地方import这个json对象使用就行了。
运行在浏览器里的纯前端是不允许直接读取本机里的任何文件的,因为这样肯定会不安全。
只能通过用户的上传操作读取到文件,你可以用<input type="file">来获取用户上传的文件,然后使用new FileReader()中的readAsText读取到文件内容,然后把字符串通过JSON.parse解析出来
或者在webpack里加上对应的json文件loader,就可以直接import进来用了

如下

//webpack.config.js

module.exports = {
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  }
}

简单点,把json的内容写到一个js文件里export
在其他tsimport即可


非要使用json,可以本地使用ajax get json

json文件在你本机吗?如果是的后,受限于浏览器同源安全策略,获取不到。
除非你写一个html,直接用浏览器打开。

文艺理科生
  • 2
新手上路,请多包涵

推荐楼主到官网看下这个案例,https://angular.cn/start/star... 检索运费价格部分
其中有用到本地json文件。
简单说,json文件在 assets 目录下,可以在服务里定义方法,通过Angular的内置http客户端获取。
关键源码如下:

getShippingPrices() {
    return this.http.get<{type: string, price: number}[]>('/assets/shipping.json');
  }

具体可参考开头的链接案例。

我感觉你可以是想使用json文件来快速的模拟后台的返回值。
最少有以下三种实现方案:



第一种:直接返回json文件。此时,只需要将json文件放到src/assets文件夹(不可版本的assets文件夹位置可能不一样)中即可,比如我们将sample.json放进去,然后直接在C层中如下获取:
    this.httpClient
      .get('assets/sample.json')
      .subscribe(data => console.log(data);

示例代码:https://stackblitz.com/edit/angular-ivy-bzv82a

第二种则是可以直接使用require把文件引进来:

    this.message1 = require('./sample1.json');

示例代码:https://stackblitz.com/edit/angular-ivy-bzv82a

第三种适用于有一些逻辑处理的,比如想实现用户名登录成功、登录失败的简单的逻辑。此方法需要借助第三方库,然后建立模拟的API,然后在请求这个API,就会返回模拟数据:

  1. npm install @yunzhi/ng-mock-api
  2. 建立API文件

    import { from } from 'rxjs/dist/types';
    import { MockApiInterface, ApiInjector } from '@yunzhi/ng-mock-api';
    export class SampleApi implements MockApiInterface {
      getInjectors(): ApiInjector<any>[] {
     return [
       new ApiInjector({
         method: 'GET',
         url: 'sample',
         result: { message: 'yunzhi mock api' }
       })
     ];
      }
    }
  3. 设置拦截器

      providers: [
     {
       provide: HTTP_INTERCEPTORS,
       multi: true,
       useClass: MockApiInterceptor.forRoot([SampleApi])
     }
      ],
  4. 发起请求

      ngOnInit(): void {
     this.httpClient.get('sample').subscribe(data => (this.message = data));
      }

    示例代码:https://stackblitz.com/edit/angular-ivy-wvtj83

关于@yunzhi/ng-mock-api的更多说明可参考:https://www.npmjs.com/package/@yunzhi/ng-mock-api

希望能帮到你。

最后Angular小白建议学习Angular入门实例教程

你知道吗?

宣传栏