jQueryオートコンプレートは、jsonオブジェクトから特定のデータ配列を解析します。

Question

ここではjqueryに問題があります。私は復帰を望んではいけない

$('#school_name').autocomplete({ 
    minLength: 3, 
    autoFocus: true, 
    source: function(request, response) { 
      $.getJSON('https://host/path', { q: $('#school_name').val() }, 
    response); 
} 

戻るJSON

{ 
    "status": "success", 
    "result": { 
    "data": [ 
     { 
     "school_id": xxx, 
     "school_name": "xxx", 
     "status": "Swasta", 
     "address": "xxx", 
     "city": "BANYUWANGI", 
     "province": "JAWA TIMUR", 
     "phone": "1234", 
     "email": "xx@a.co", 
     "picture": null, 
     "is_published": "Y" 
     }, 
     { 
     "school_id": xxx, 
     "school_name": "xxx", 
     "status": "Swasta", 
     "address": " ", 
     "city": "", 
     "province": "", 
     "phone": "-", 
     "email": null, 
     "picture": null, 
     "is_published": "Y" 
     } 
    ] 
    } 
} 

：だから私は、私は私のコード

のjQueryを提供し、ここで、データベースからJSONオブジェクトを使用してオートコンプリートテキストフィールドを作成したいです私は持っているような値jsonのオブジェクトは、私はただ学校名の配列形式で、私の問題を解決するために助けてください

Answer 1

必要なデータをプッシュするresponseコールバックを使用してください。

$('#school_name').autocomplete({ 
    minLength: 3, 
    autoFocus: true, 
    source: function(request, response) { 

    $.get('https://host/path').always(function(res) { 

     var json = JSON.parse(res), result_arr = []; 
     $.each(json.result.data, function(k,v) { 
      result_arr.push(v.school_name); 
     }); 
     response(result_arr); 

    }); 

    } 
}); 

Answer 2

Array.prototype.mapを使用して配列を変換できます。 mapは、配列内の各項目に対して関数を実行し、戻り値で新しい配列を作成します。

const json = { 
 
    "status": "success", 
 
    "result": { 
 
    "data": [ 
 
     { 
 
     "school_id": '1234', 
 
     "school_name": "First School Name", 
 
     "status": "Swasta", 
 
     "address": "xxx", 
 
     "city": "BANYUWANGI", 
 
     "province": "JAWA TIMUR", 
 
     "phone": "1234", 
 
     "email": "xx@a.co", 
 
     "picture": null, 
 
     "is_published": "Y" 
 
     }, 
 
     { 
 
     "school_id": '5678', 
 
     "school_name": "Second School Name", 
 
     "status": "Swasta", 
 
     "address": " ", 
 
     "city": "", 
 
     "province": "", 
 
     "phone": "-", 
 
     "email": null, 
 
     "picture": null, 
 
     "is_published": "Y" 
 
     } 
 
    ] 
 
    } 
 
} 
 

 
console.log(
 
    json.result.data.map(school => school.school_name) 
 
)