javascript - 如何编写下拉选项来加载 JSON 文件？

Question

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

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

我有一个工作列表和按钮(对我来说这是一项成就)，但不知道如何链接 JSON 并加载它。

子问题: 我在哪里存储这些行业特定的 json 文件？就和我的 javascript 代码在同一个文件夹中吗？

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

我搜索过SOF和g​​oogle，但一无所获。我只找到了“如何使用 json 数据填充列表”和“如何从 json 数组构建动态列表”，这两个都不是我正在寻找的。

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

提前致谢

这是我的代码:

这是我的 list :

<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 文件中定义的“下一个”按钮处理程序中使用此数据。

e.g. with your example code, you can use this 'data' variable inside your 'loadJSON' function.

我确信您知道如何从 Material 下拉列表中获取选定的数据。 我希望这篇文章绝对对您有帮助。 谢谢。