如何编程下拉选项以加载JSON文件？

Question

我正在尝试开发JavaScript Web应用程序。在此应用程序中，我需要各种商业行业的下拉列表（选项：医疗保健，银行，教育等）。当用户选择一个选项并单击“下一步”按钮时，应用程序需要加载特定于所选选项（Healthcare.json，Banking.json，Education.json等）的JSON文件。

我的问题是：如何将下拉列表中的每个选项链接到特定的JSON文件？这样，当单击“下一步”按钮时，将加载JSON文件。

我有一个工作列表和按钮（对我来说是个成就），但不知道如何链接和加载JSON。

子问题：我将这些行业特定的json文件存储在哪里？与我的JavaScript代码位于同一文件夹中吗？

这是我的第一个应用程序，因此非常感谢您的帮助！

我已经搜索过SOF和Google，并且空手而归。我只找到了“如何用json数据填充列表”和“如何从json数组构建动态列表”，这都不是我想要的。

我希望工作解决方案能够在单击“下一步”按钮后简单地加载与每个行业关联的JSON文件。

提前感谢

这是我的密码：

这是我的清单：

<mat-form-field>
    <mat-select placeholder="Industry" [(ngModel)]="industry">
        <mat-option [value]="1">None</mat-option>
        <mat-option [value]="2">Healthcare</mat-option>
        <mat-option [value]="3">Banking</mat-option>
        <mat-option [value]="4">Education</mat-option>
        <mat-option *ngFor="let vm of viewModelsService.viewModels" [value]=vm>
            {{vm.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

这是我的按钮：

<button mat-button [disabled]="getScoreExpressionError()" (click)="loadJSON(); showScoreVariables = false">Next</button>

Answer 1

我认为您不需要动态加载JSON数据。您可以简单地在单个Javascript或Typescript文件中静态定义JSON数据，然后将该文件直接导入Javascript文件中。我假设您使用的是Angular，这是我的示例。

static-data.ts

export const data = {
   healthCare: {
      ...
   },
   banking: {
      ...
   },
   education: {
      ...
   }
}

然后在您的组件ts文件中，导入此数据。

...
import { data } from 'static-data';
...

现在您可以在组件ts文件中定义的“下一个”按钮处理程序中使用此数据。

例如通过示例代码，您可以在'loadJSON'函数中使用此'data'变量。

我确定您知道如何从物料下拉列表中选择数据。希望本文对您有所帮助。谢谢。