セマンティックUIのドロップダウンをリモートデータでロードする

Question

私は、セマンティックのuiリモートコンテンツのドキュメントからドロップダウン（here）を読んでいますが、私の場合はそれをどのように使用するか分かりません。

私はback4app（構文解析）に必要なデータを問い合わせてJSONに変換する機能を持っています。返されたデータをドロップダウンにどのように埋め込むのですか？私はそれを手動で構築する必要がありますか、または何とかJSONを直接渡すことはできますか？あなたのドロップダウン初期設定で

Answer 1

私はこれをResponseAsyncを使って解決しました - 以下のコードの抜粋を参照してください。わたしにはできる。問題は、私は、クエリを実行するためにパースとURLを使用していないことです - 申し訳ありませんが、私はこれを言うことを忘れました。

$('.ui.dropdown.age_group').dropdown({ 
    onChange: function(value, text, $choice){ 
     $('.ui.dropdown.group').dropdown('clear'); 
     GetGroups(); 
    ; 
    }, 
    apiSettings: { 
     responseAsync: function(settings, callback) { 

    var query = new Parse.Query("Teams"); 
     query.ascending("AGE_GROUP"); 
    query.find({ 
    success: function(results) { 
     var jsonArray = []; 

    // Create the JSON array that the dropdown needs 
     for(var i = 0; i < results.length; i++) { 
      jsonArray.push(results[i].toJSON()); 
     } 

    // Create the required json for the dropdown (needs name and value) 
     var myresults = jsonArray.map(function(item) { 
      return { 
       name: item, 
       value: item 
      } 
     }); 

     var response = { 
      success: true, 
      results: myresults 
      }; 
     // This will populate the dropdown 
      callback(response); 
     }, 
     error: function(error) { 

     } 
    }); 
    } 
    } 
}); 

Answer 2

、リモートデータ用apiSettingsハッシュを追加します。

$(selector) 
    .dropdown({ 
     apiSettings: { 
      url: <Your_API_URL>, 
      beforeXHR: (xhr) => { 
       // Set Custom Headers here 
       xhr.setRequestHeader(key, val) 
      }, 
      onResponse: (response) => { 
       // Modify your JSON response into the format SUI wants 
       return response 
      } 
}); 

Thisは、応答形式セマンティック-UIは、あなたのユースケースについて

を期待し、あなたの機能を打破する必要があるかもしれませんです 1.データを取得する部分 2.データをJSONにサニタイズする部分

daを取得するには、apiSettingsハッシュを使用する必要があります（あなたのURLと認証などのカスタムヘッダーを入れるだけです）。これはあなたの関数のパート1を置き換えます。

データが返されると、SUIのonResponse（）メソッドが呼び出されます。ここでJSONにデータをサニタイズする関数を呼び出します。

JSONレスポンスを、SUIの期待通りに若干修正する必要がある場合があります。