angular 读取json文件

忘是亡心i 2023-06-28 12:29 63阅读 0赞

### 步骤简介 ###

1. 把json文件放入 angular 项目目录的 assets 文件夹下（这样就可直接读取）

2. 导入angular中的 HttpClientModule 来读取，这样就可在组件的代码中调用hrrpClient类的get()方法，把json转为observable读取

### 以下是例子 ###

1. json 文件：

{
        "test_type": "command",
        "button_name": "ResetTable",
        "mock_api": {
          "method": "POST",
          "path": "/api/v1/CT/utility/table/reset",
          "response_body": {}
        },
        "command": {
          "property_names": ["TableController"],
          "command_name": "ResetTableCommand",
          "command_body": {
            "mode": 0 
          }
        }
      }

2.

constructor(
        private httpClient: HttpClient
    ) {}
    
      public getSingleFile(testCaseUrl: string): Observable<any> {
        return this.httpClient.get(testCaseUrl);
      }
    
    // testCaseUrl 是json文件的路径, 如: assets/test.json
    
    commandMethod(commandName: string) {
        let testCaseUrl = `assets/machineAPI/command/${commandName}.json`;
        console.log(commandName);
        this.getSingleFile(testCaseUrl)
          .pipe(takeUntil(this.destory$))
          .subscribe(data => 
    {cosnt x = date['command']['property_names'];
    console.log(x)})
    }
    
    //打印出的x为 ["TableController"]
    
    // 这里好像不需要取消订阅, 因为是使用了httpClient, 待定

发表评论取消回复

表情：

评论列表（有 0 条评论，63人围观）

还没有评论，来说两句吧...

相关阅读

相关 java读取json文件

要在Java中读取JSON文件，可以使用以下步骤：导入所需的库： import java.io.File; import java.io.IOExcept

水深无声/ 2023年10月10日 16:37/ 0 赞/ 117 阅读

相关 angular 读取json文件

步骤简介 1. 把json文件放入 angular 项目目录的 assets 文件夹下（这样就可直接读取） 2. 导入angular中的 HttpClientModul

忘是亡心i/ 2023年06月28日 12:29/ 0 赞/ 64 阅读

相关 angular7中读取本地json文件，读取本地数据

使用httpClient读取本地JSON文件 import { HttpClient } from '@angular/common/http';

怼烎@/ 2023年06月05日 05:52/ 0 赞/ 40 阅读

相关 csv、json 文件读取

1、CSV 文件存储 1.1 写入简单示例 import csv with open('data.csv', 'a') as csvf

布满荆棘的人生/ 2023年06月02日 10:53/ 0 赞/ 53 阅读

相关 Angular读取文件内容并显示

一、读取文件内容 html <input type="file" accept=".csv,.txt" (change)="openFile($event)">

刺骨的言语ヽ痛彻心扉/ 2023年05月30日 10:46/ 0 赞/ 161 阅读

相关 Angular.x读取本地静态json文件（引入json文件使用）

由于项目下拉加载数据过多（城市、行业），所以将数据封装成json数据放存放angular中静态文件的assets目录下， 1. 将json文件放入到assets文件下； 2

迷南。/ 2023年02月14日 15:52/ 0 赞/ 163 阅读

相关 json文件读取

import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; im

清疚/ 2022年06月03日 05:35/ 0 赞/ 318 阅读

相关 JavaScript读取JSON文件

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。有关于json的相关信息，可参考：[json百度百科][json]。 1、HT

旧城等待，/ 2022年05月29日 00:38/ 0 赞/ 294 阅读

相关 springboot 读取 json 文件

直接代码，json文件在 resources 下 import com.yf.af.config.controller.IServerConfigController

「爱情、让人受尽委屈。」/ 2022年03月26日 08:38/ 0 赞/ 632 阅读

相关 JavaScript读取json文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

深藏阁楼爱情的钟/ 2021年07月26日 12:43/ 0 赞/ 609 阅读