时间戳

首页 > 解决方案 > 如何编写下拉选项以加载 JSON 文件？

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

问题描述

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

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

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

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

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

我搜索了 SOF 和谷歌，却空手而归。我只找到了“如何用 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>

标签： javascripthtmljsonmaterial-designdropdown

解决方案

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

静态数据.ts

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

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

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

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

例如，使用您的示例代码，您可以在“loadJSON”函数中使用这个“数据”变量。

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

推荐阅读