jQuery自动补全解析json对象中的特定数据数组

Question

I have some problem with here jquery here. So I want to make an autocomplete text field using json object from database, here I provide my code

jQuery :

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

Return 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"
      }
    ]
  }
}

I dont want return value json object like i've got, I only need school_name in array form, please help me to solve my problem

Answer 1

Use response callback to push data you want.

$('#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

You can use Array.prototype.map to transform an array. map will run a function over each item in the array and create a new array with the returned values.

 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) )