如何在JavaScript函数中将来自ajax请求的json响应用作Javascript数组

Question

I have created a autocomplete form using javascript which takes data in the form of an array like

var city_list = ["Allahabad","Baramulla","Bellary"]

But my controller returns the requested data in json format like

[{"city_id": 9,"city_name": "Allahabad"},{"city_id": 47,"city_name": "Baramulla"},{"city_id": 60,"city_name": "Bellary"}]

I have searched a lot of StackOverflow and internet posts but nothing worked for me and since I am not good at javascript so I am unable to find a solution on my own.

Ajax Request

$('#heroCitySearch').keyup(function () {
     var q = 'q='+$(this).val();
     if(q != '') {
        $.ajax({
           type:'GET',
           url:"/fetch/city",
           data:q,
           success:function (data) {
              if(data){
                 $.each(data,function(value){
                    autocomplete(document.getElementById("heroCitySearch"), data[value].city_name);

                    // "data[value].city_name" <- This parameter must be an array

              }
           }
        })
     }
  });

Javascript Function (autocomplete)

function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
   var a, b, i, val = this.value;
   /*close any already open lists of autocompleted values*/
   closeAllLists();
   if (!val) { return false;}
   currentFocus = -1;
   /*create a DIV element that will contain the items (values):*/
   a = document.createElement("DIV");
   a.setAttribute("id", this.id + "autocomplete-list");
   a.setAttribute("class", "autocomplete-items");
   /*append the DIV element as a child of the autocomplete container:*/
   this.parentNode.appendChild(a);

   /*==== Below is the code block which uses array elements====*/

   /*for each item in the array...*/
   for (i = 0; i < arr.length; i++) {
     /*check if the item starts with the same letters as the text field value:*/
     if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
       /*create a DIV element for each matching element:*/
       b = document.createElement("DIV");
       /*make the matching letters bold:*/
       b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
       b.innerHTML += arr[i].substr(val.length);
       /*insert a input field that will hold the current array item's value:*/
       b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
       /*execute a function when someone clicks on the item value (DIV element):*/
           b.addEventListener("click", function(e) {
           /*insert the value for the autocomplete text field:*/
           inp.value = this.getElementsByTagName("input")[0].value;
           /*close the list of autocompleted values,
           (or any other open lists of autocompleted values:*/
           closeAllLists();
       });
       a.appendChild(b);
     }
   }
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
   var x = document.getElementById(this.id + "autocomplete-list");
   if (x) x = x.getElementsByTagName("div");
   if (e.keyCode == 40) {
     /*If the arrow DOWN key is pressed,
     increase the currentFocus variable:*/
     currentFocus++;
     /*and and make the current item more visible:*/
     addActive(x);
   } else if (e.keyCode == 38) { //up
     /*If the arrow UP key is pressed,
     decrease the currentFocus variable:*/
     currentFocus--;
     /*and and make the current item more visible:*/
     addActive(x);
   } else if (e.keyCode == 13) {
     /*If the ENTER key is pressed, prevent the form from being submitted,*/
     e.preventDefault();
     if (currentFocus > -1) {
       /*and simulate a click on the "active" item:*/
       if (x) x[currentFocus].click();
     }
   }
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
   x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
   if (elmnt != x[i] && elmnt != inp) {
   x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}

I have copied the above script from w3school .

And in above code b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>"; instead of city name if I want to use city Id, what changes should I make.

Thanks for your help.

Answer 1

Below example snippet would help you get only the city name:

 <!-- begin snippet: js hide: false console: true babel: false --> 

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } body { font: 16px Arial; } .autocomplete { /*the container must be positioned relative:*/ position: relative; display: inline-block; } input { border: 1px solid transparent; background-color: #f1f1f1; padding: 10px; font-size: 16px; } input[type=text] { background-color: #f1f1f1; width: 100%; } input[type=submit] { background-color: DodgerBlue; color: #fff; cursor: pointer; } .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; /*position the autocomplete items to be the same width as the container:*/ top: 100%; left: 0; right: 0; } .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; } .autocomplete-items div:hover { /*when hovering an item:*/ background-color: #e9e9e9; } .autocomplete-active { /*when navigating through the items using the arrow keys:*/ background-color: DodgerBlue !important; color: #ffffff; } </style> </head> <body> <h2>Autocomplete</h2> <p>Start typing:</p> <!--Make sure the form has the autocomplete function switched off:--> <form autocomplete="off" action="/action_page.php"> <div class="autocomplete" style="width:300px;"> <input id="myInput" type="text" name="myCountry" placeholder="Country"> </div> <input type="submit"> </form> <script> function autocomplete(inp, arr) { /*the autocomplete function takes two arguments, the text field element and an array of possible autocompleted values:*/ var currentFocus; /*execute a function when someone writes in the text field:*/ inp.addEventListener("input", function(e) { var a, b, i, val = this.value; /*close any already open lists of autocompleted values*/ closeAllLists(); if (!val) { return false;} currentFocus = -1; /*create a DIV element that will contain the items (values):*/ a = document.createElement("DIV"); a.setAttribute("id", this.id + "autocomplete-list"); a.setAttribute("class", "autocomplete-items"); /*append the DIV element as a child of the autocomplete container:*/ this.parentNode.appendChild(a); /*for each item in the array...*/ for (i = 0; i < arr.length; i++) { /*check if the item starts with the same letters as the text field value:*/ if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) { /*create a DIV element for each matching element:*/ b = document.createElement("DIV"); /*make the matching letters bold:*/ b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>"; b.innerHTML += arr[i].substr(val.length); /*insert a input field that will hold the current array item's value:*/ b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>"; /*execute a function when someone clicks on the item value (DIV element):*/ b.addEventListener("click", function(e) { /*insert the value for the autocomplete text field:*/ inp.value = this.getElementsByTagName("input")[0].value; /*close the list of autocompleted values, (or any other open lists of autocompleted values:*/ closeAllLists(); }); a.appendChild(b); } } }); /*execute a function presses a key on the keyboard:*/ inp.addEventListener("keydown", function(e) { var x = document.getElementById(this.id + "autocomplete-list"); if (x) x = x.getElementsByTagName("div"); if (e.keyCode == 40) { /*If the arrow DOWN key is pressed, increase the currentFocus variable:*/ currentFocus++; /*and and make the current item more visible:*/ addActive(x); } else if (e.keyCode == 38) { //up /*If the arrow UP key is pressed, decrease the currentFocus variable:*/ currentFocus--; /*and and make the current item more visible:*/ addActive(x); } else if (e.keyCode == 13) { /*If the ENTER key is pressed, prevent the form from being submitted,*/ e.preventDefault(); if (currentFocus > -1) { /*and simulate a click on the "active" item:*/ if (x) x[currentFocus].click(); } } }); function addActive(x) { /*a function to classify an item as "active":*/ if (!x) return false; /*start by removing the "active" class on all items:*/ removeActive(x); if (currentFocus >= x.length) currentFocus = 0; if (currentFocus < 0) currentFocus = (x.length - 1); /*add class "autocomplete-active":*/ x[currentFocus].classList.add("autocomplete-active"); } function removeActive(x) { /*a function to remove the "active" class from all autocomplete items:*/ for (var i = 0; i < x.length; i++) { x[i].classList.remove("autocomplete-active"); } } function closeAllLists(elmnt) { /*close all autocomplete lists in the document, except the one passed as an argument:*/ var x = document.getElementsByClassName("autocomplete-items"); for (var i = 0; i < x.length; i++) { if (elmnt != x[i] && elmnt != inp) { x[i].parentNode.removeChild(x[i]); } } } /*execute a function when someone clicks in the document:*/ document.addEventListener("click", function (e) { closeAllLists(e.target); }); } /*An array containing all the country names in the world:*/ var countries = [{"city_id": 9,"city_name": "Allahabad"},{"city_id": 47,"city_name": "Baramulla"},{"city_id": 60,"city_name": "Bellary"}].map(city => city.city_name); /*initiate the autocomplete function on the "myInput" element, and pass along the countries array as possible autocomplete values:*/ autocomplete(document.getElementById("myInput"), countries); </script> </body> </html> 

const cityArry = [{"city_id": 9,"city_name": "Allahabad"},{"city_id": 47,"city_name": "Baramulla"},{"city_id": 60,"city_name": "Bellary"}]

console.log(cityArry.map(city => city.city_name))

Answer 2

You can pluck out what you want from that JSON response. Something like this:

 // You example var cities = [{ "city_id": 9, "city_name": "Allahabad" }, { "city_id": 47, "city_name": "Baramulla" }, { "city_id": 60, "city_name": "Bellary" }]; const myFormat = cities.map((city) => { return city.city_name; }) console.log(myFormat); // Output // [ // "Allahabad", // "Baramulla", // "Bellary" // ] 

Answer 3

instead of this:

if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {

}

use this:

if (arr[i].city_id == +val ||
    arr[i].city_name.substr(0, val.length).toUpperCase() == val.toUpperCase()) {
}

+val will convert value to the number.

and you can also improve the search by adding regex matching, so it will found text anywhere in the name

var re = new RegExp(val, 'i');

if (arr[i].city_id == +val || re.test(arr[i].city_name)) {

}

if you want to be able to use special characters like * or + in input, you will need to escape the regex special characters .