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

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

0 голосов
/ 10 мая 2018

Привет всем, у меня есть 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>

1 Ответ

0 голосов
/ 11 мая 2018

Немного изменил ваш код, чтобы подражать поддельному 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>
...