Bootstrap-3-Typeahead bekommen Recht Json-Taste

Question

Ich benutze dieses Plugin für eine Ajax-Auto-Vervollständigen-Funktion https://github.com/bassjobsen/Bootstrap-3-Typeahead der Bootstrap-3-Typ. Der Code unten funktioniert, aber ich weiß nicht, warum es funktioniert. Insbesondere wie der Prozess und die Antwortparameter funktionieren.

$(document).ready(function() { 
    $('#typeahead-input').typeahead({ 
     autoSelect: true, 
     minLength: 1, 
     delay: 400, 
     source: function (query, process) { 
      $.ajax({ 
       url: '/api/location', 
       data: {sstr: query}, 
       dataType: 'json' 
      }) 
       .done(function(response) { 

        // console.log(response) 
        return process(response); 
       }); 
     } 
    }); 
}); 

meine Json sieht aus wie dieses

[ 
    { 
     "id": "123", 
     "name": "Frederiksted", 
     "state": "VI", 
     "zip_code": "840" 
    } 
] 

Was passiert, wenn ich auf bevölkert basiert auf auf dem zip_code Feld automatisch zu vervollständigen wollte, wie würde ich es tun? Ich habe zu tun "response.zipcode" versucht, aber es kommt als undefiniert

Answer 1

Zuerst response.zipcode undefiniert, da eine Antwort Array kein Objekt ist. Sie greifen auf die Postleitzahl zu, indem Sie [0] .zip_code eingeben (und beachten Sie, dass Ihr Eigentumsname nicht "Postleitzahl" ist, sondern "Postleitzahl").

Zweitens, Dokumentation der "Source" -Eigenschaft sagt: Die Datenquelle, um abzufragen. Kann ein Array von Strings sein, ein Array von JSON-Objekten mit einer Namenseigenschaft oder einer Funktion.

Also, was Sie der "Prozess" -Methode geben, sollte höchstwahrscheinlich ein Array von Strings oder Array von JSON-Objekten sein, wobei jedes JSON-Objekt eine "name" -Eigenschaft hat. Wenn Ihre Antwort korrekt ist und ein Array von Objekten zurückgibt, wie Sie sagen, , dann bedeutet dies, dass Ihre Objekte jeweils die Eigenschaft 'name' haben, sodass die Eigenschaft angezeigt wird. Wenn Sie noch etwas anderes anzeigen möchten, müssen Sie eine neue String-Array aus der Antwort erstellen:

So würde ich das versuchen:

.done(function(response) { 
    // get the response and create a new array of Strings 
    var names = $.map (response, function(item) { 
      return item.name + '-' + item.zip_code; 
    }); 
    // console.log(response) 
    return process(names); 
    }); 

oder eine andere Art und Weise:

.done(function(response) { 
// get the response and change the 'name' of each object 
$.each (response, function() { 
     this.name = this.name + '-' + this.zip_code; 
}); 
// console.log(response) 
return process(response); 
}); 

Answer 2

ich Ihnen Problem mit JSON-Format haben denke:

[ "id": "123", "name": „Frederiksted “ "Zustand": "VI" "zip_code": "840" ]