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

88
6

Привет всем, у меня есть JSON файл, который я должен загрузить, а затем заполнить данные. Элемент, который должен быть заполнен, - это выпадающее меню с chosen библиотекой JQuery. Мне интересно, правильно ли структурирован код, так как я получаю какие-либо данные в раскрывающемся меню. Я вижу, что одна проблема может быть связана с состоянием гонки между элементами JS и DOM. Я не уверен, что это вызвало проблему или, возможно, выбран JQuery. Если кто-нибудь знает лучший способ загрузить файл и заполнить данные, пожалуйста, дайте мне знать. Спасибо.

var appData = {};
$(document).ready(function() {
$.getJSON("JSON/Buildings.json", function(json) {
appData.Buildings = json;

var bldgMenu = $('.bldg-menu');
bldgMenu.find("option:gt(0)").remove();

$.each(appData.Buildings, function(key, value) {
alert(value.NUMBER);
bldgMenu.append($("<option></option>").val(value.NUMBER).text('(' + value.NUMBER + ') ' + value.NAME));
});
});
});

/*Example of my appData JS after JSON file is loaded

var appData = {
Buildings : [
{number:"56",name:"Big Grove"},
{number:"12",name:"Umbrella"}
]
}

*/

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="Chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="Chosen/chosen.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="buildings"><span class="label label-primary">Buildings:</span></label>
<select multiple class="form-control bldg-menu chosen-select" name="frm_bldg" id="frm_bldg" required>
<option value="">--Choose Building(s)--</option>
</select>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>

спросил(а) 2021-01-25T16:34:27+03:00 4 месяца, 3 недели назад
1
Решение
89

Модифицировал ваш код немного для мимического поддельного AJAX. Он заполняет данные в меню выбора. Дайте мне знать, если это не то, что вы просите, и я изменю ответ.

var appData = {};

$(document).ready(function() {
//$.getJSON("JSON/Buildings.json", function(json) {
setTimeout(function fakeAjax() {
var appData = {
Buildings: [{
number: "56",
name: "Big Grove"
},
{
number: "12",
name: "Umbrella"
}
]
}

manipulateDom(appData);
}, 2000);

function manipulateDom(appData) {
var bldgMenu = $('#frm_bldg');
bldgMenu.find("option").remove();
appData.Buildings.map(obj => {
let formattedText = '(${obj.number}) ${obj.name}';
bldgMenu.append($("<option></option>").val(obj.number).text(formattedText));
});
};

});

/* Hi everyone I have JSON file that I should load and then populate the data. Element that should be populated is drop down menu with chosen JQuery library included. I'm wondering if my code is structured correctly since I'm getting any data populated in drop down menu. I see one problem might the race condition between JS and DOM elements. I'm not sure if that is causing the problem or maybe JQuery chosen. If anyone know the best way to load the file and populate data please let me know. Thank you.*/
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="Chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="Chosen/chosen.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="buildings"><span class="label label-primary">Buildings:</span></label>
<select multiple class="form-control bldg-menu chosen-select" name="frm_bldg" id="frm_bldg" required>
<option value="">--Choose Building(s)--</option>
</select>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>

ответил(а) 2021-01-25T16:34:27+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема