JavaScriptでjsonファイルを開く

Question

私は自分のウェブサイト用のスクリプトを用意しています。これはドロップダウンメニューを作成し、custom.jsファイルから実行しています。私はチュートリアルから一緒にそれをつなぎ、それは動作します。私は1つのことを除いてそれに完全に満足しています。私はスクリプトにさまざまなレベルのメニューを埋めなければならない。この1つの機能は300行で、ほぼすべてのメニューです。他の場所でも同じ情報を使用したいので、さまざまなレベルをjsonファイルに書き直しました。私が望むのは、サーバー上にjsonファイルを開いてこの同じロジックで実行できることだけです。私はAjaxとjQueryを見ているが、JavaScriptは私にとっては外国だが、私はちょうどそれをまとめることはできないと思う。私は誰かが私を助けることができるか、少なくとも私に正しい方向に素晴らしいハードシューズを与えることを望んでいます。

あなたは、AJAX JSONがロードされたとき、これは、このための変更非同期データ接続をunderstanするessencialでデータを操作する必要が

// Function auto populates dropdown menus. Takes in 
// s1 and populates dropdown based on selection 
function populatemenu(s1, s2) { 
    var s1 = document.getElementById(s1); 
    var s2 = document.getElementById(s2); 
    s2.innerHTML = ""; 
    if(s1.value == "animal") { 
     var optionArray = ["|", 
          "dog|Dog", 
          "cat|Cat",]; 
    } else if(s1.value == "vegetable") { 
     var optionArray = ["|", 
          "carrots|Carrots", 
          "peas|Peas",]; 
    } for(var option in optionArray) { 
      var pair = optionArray[option].split("|"); 
      var newOption = document.createElement("option"); 
      newOption.value = pair[0]; 
      newOption.innerHTML = pair[1]; 
      s2.options.add(newOption); 
    } 
} 

// I think this is close? 
function populatesitetest(s1, s2) { 
    var s1 = document.getElementById(s1); 
    var s2 = document.getElementById(s2); 
    s2.innerHTML = ""; 
    $(function(){ 
     $.getJSON("/menu_data.json", function(jsdata) { 
     jsonObj = jsdata; 
     console.log(jsonObj); 
     }); 
    }); 
     var optionArray = jsonObj[s1.value] 
     for(var option in optionArray) { 
      var pair = optionArray[option].split("|"); 
      var newOption = document.createElement("option"); 
      newOption.value = pair[0]; 
      newOption.innerHTML = pair[1]; 
      s2.options.add(newOption); 
     } 
    } 

Answer 1

：

// s1と選択

function populatemenu(s1, s2) { 
    var s1 = document.getElementById(s1); 
    var s2 = document.getElementById(s2); 
    s2.innerHTML = ""; 
    if(s1.value == "animal") { 
     var optionArray = ["|", 
          "dog|Dog", 
          "cat|Cat",]; 
    } else if(s1.value == "vegetable") { 
     var optionArray = ["|", 
          "carrots|Carrots", 
          "peas|Peas",]; 
    } for(var option in optionArray) { 
      var pair = optionArray[option].split("|"); 
      var newOption = document.createElement("option"); 
      newOption.value = pair[0]; 
      newOption.innerHTML = pair[1]; 
      s2.options.add(newOption); 
    } 
} 

// I think this is close? 
function populatesitetest(s1, s2) { 
    var s1 = document.getElementById(s1); 
    var s2 = document.getElementById(s2); 
    s2.innerHTML = ""; 
    $(function(){ 
     $.getJSON("/menu_data.json", function(jsdata) { 
     jsonObj = jsdata; 
     console.log(jsonObj); 
var optionArray = jsonObj[s1.value] 
     for(var option in optionArray) { 
      var pair = optionArray[option].split("|"); 
      var newOption = document.createElement("option"); 
      newOption.value = pair[0]; 
      newOption.innerHTML = pair[1]; 
      s2.options.add(newOption); 
     } 
     }); 
    }); 

    } 

に基づいてドロップダウンを移入