ajaxを使用してJSONファイルのデータをセレクトします

Question

ウェブ開発用にJSONファイルを使用したことで新しくなりました。データ記憶の面での有用性とパワーのために興味を持っています。今、私はページをJSONのデータでいっぱいにするため、JSONを同じページに追加するのではなく、パス経由でJSONファイルを使用したいと考えています。昨日私は次のコードを持っていますが、JSONファイルを同じページに追加するのは別のものではありません。 JSONを同じページに追加する代わりに、JSONファイルパスを使用するにはどうすればよいですか？

HTML

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <div class="form-group"> 
     <label for="supplier_bank_name">Bank Name</label> 
     <select class="form-control selectpicker" data-live-search="true" id="supplier_bank_name" name="supplier_bank_name"></select> 
    </div> 
</div> 

このコードは、同じページにうまく動作しますが、JSONますPREVIOUS CODE
。

var allbanks = { 
     banks:[ 
      { 
       "index": 0, 
       "bankname": "1st Source Bank", 
       "location": "USA", 
       "website": "www.1stsource.com" 
      }, 
      { 
       "index": 1, 
       "bankname": "1st Summit Bank", 
       "location": "North America", 
       "website": "www.1stsummit.com" 
      }, 
      { 
       "index": 2, 
       "bankname": "A.J. Smith Federal Savings Bank", 
       "location": "USA", 
       "website": "www.ajsmithbank.com" 
      } 
     ] 
    }; 

    $(document).ready(function() { 
     var listItems = '<option selected="selected" value="0">Select Bank</option>'; 

     for (var i = 0; i < allbanks.banks.length; i++) { 
      listItems += "<option data-tokens='" + allbanks.banks[i].bankname + "' value='" + allbanks.banks[i].bankname + "'>" + allbanks.banks[i].bankname + "</option>"; 
     } 

     $("#supplier_bank_name").html(listItems); 
    }); 

SCRIPT TODAY
作業と

var allbanks = (function() { 
    var allbanks = null; 
    $.ajax({ 
     'async': false, 
     'global': false, 
     'url': 'js/allbanks.json', 
     'dataType': "json", 
     'success': function (data) { 
      allbanks = data; 
     } 
    }); 
    return allbanks; 
})(); 


$(document).ready(function() { 
    var listItems = '<option selected="selected" value="0">Select Bank</option>'; 

    for (var i = 0; i < allbanks.banks.length; i++) { 
     listItems += "<option data-tokens='" + allbanks.banks[i].bankname + "' value='" + allbanks.banks[i].bankname + "'>" + allbanks.banks[i].bankname + "</option>"; 
    } 

    $("#supplier_bank_name").html(listItems); 
}); 

JSON

{ 
    "banks": [ 
     { 
      "index": 0, 
      "bankname": "1st Source Bank", 
      "location": "USA", 
      "website": "www.1stsource.com" 
     }, 
     { 
      "index": 1, 
      "bankname": "1st Summit Bank", 
      "location": "North America", 
      "website": "www.1stsummit.com" 
     }, 
     { 
      "index": 2, 
      "bankname": "A.J. Smith Federal Savings Bank", 
      "location": "USA", 
      "website": "www.ajsmithbank.com" 
     } 
    ] 
} 

Answer 1

$.ajaxが非同期関数であるので、allbanks内のコードをexecします解決策を探していない この順序でUTE：

1. 割り当てallbanksnull
2. にAJAXリクエストがまだ戻っていないので、まだnullに設定されているajax要求
3. 戻りallbanksを、確認します。
4. あなたは内のデータを使用する必要があり、これを修正するには（これは、関数の外に戻りませんし、最初の行にallbanks変数に設定されることはありません）

データを受信し、allbanksにそれを割り当てますsuccess ajaxリクエストの一部。

function createSelectItems(data) { 
    var listItems = '<option selected="selected" value="0">Select Bank</option>'; 

    for (var i = 0; i < data.banks.length; i++) { 
     listItems += "<option data-tokens='" + data.banks[i].bankname + "' value='" + data.banks[i].bankname + "'>" + data.banks[i].bankname + "</option>"; 
    } 

    $("#supplier_bank_name").html(listItems); 
} 

$(document).ready(function() { 
    $.ajax({ 
     'async': false, 
     'global': false, 
     'url': 'js/allbanks.json', 
     'dataType': "json", 
     'success': function (data) { 
      createSelectItems(data); 
     } 
    }); 
}); 

---

EDIT

以下のコメントを参照してください。

allbank_connect.js

// Code goes here 
var allbanks = (function() { 
    var allbanks = null; 

    $.ajax({ 
    'async': false, 
    'global': false, 
    'url': 'js/allbanks.json', 
    'dataType': "json", 
    'success': function (data) { 
     allbanks = data; 
    } 
    }); 

    return allbanks; 
})(); 

$(document).ready(function() { 
    var listItems = '<option selected="selected" value="0">Select Bank</option>'; 

    for (var i = 0; i < allbanks.banks.length; i++) { 
    listItems += "<option data-tokens='" + allbanks.banks[i].bankname + "' value='" + allbanks.banks[i].bankname + "'>" + allbanks.banks[i].bankname + "</option>"; 
    } 

    $("#supplier_bank_name").html(listItems); 
});