Как запрограммировать опцию выпадающего меню для загрузки файла JSON? - PullRequest
Новая
       8

Как запрограммировать опцию выпадающего меню для загрузки файла JSON?

1 голос
/ 19 октября 2019

Я пытаюсь разработать веб-приложение на javascript. В этом приложении мне нужен раскрывающийся список различных коммерческих отраслей (варианты: здравоохранение, банковское дело, образование и т. Д.). Когда пользователь выбирает параметр и нажимает кнопку «Далее», приложению необходимо загрузить файл JSON, соответствующий выбранному параметру (Healthcare.json, Banking.json, Education.json и т. Д.).

Мой вопросявляется: Как связать каждый параметр из раскрывающегося списка с конкретным файлом JSON? Так что файл JSON загружается при нажатии кнопки «Далее».

У меня есть рабочий список и кнопка (для меня это достижение), но я не могу понять, как связать JSON и загрузитьit.

Подвопрос: Где я могу хранить эти специфичные для 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>

1 Ответ

0 голосов
/ 19 октября 2019

Я не думаю, что вам нужно загружать данные JSON динамически. Вы можете просто определить данные JSON в одном статическом файле Javascript или Typescript и импортировать этот файл непосредственно в свой файл Javascript. Я предполагаю, что вы используете Angular, и вот мой пример.

static-data.ts 

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

Затем в файле компонента ts импортируйте этотdata. 

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

Теперь вы можете использовать эти данные в вашем обработчике кнопки «next», который может быть определен в файле ts компонента.

например, с вашим примером кода выВы можете использовать эту переменную «data» внутри вашей функции «loadJSON».

Я уверен, что вы знаете, как получить выбранные данные из выпадающего списка материалов. Я надеюсь, что эта статья определенно поможет вам. Спасибо.

...