Twitter Typeahead：未定义

Question

I have a .json file with data and I want to use Twitter's typeahead for the locations of railway stations in the .json file. (See my jsFiddle) When I use the current code, I run into errors. On display, when I start typing, the results from typeahead is "undefined" for every record.

The problem is in the source method:

source: function(query, process){
                $.getJSON("../data/stations.json", function(data){
                    $.each(data.Stations.Station, function(key,val){
                        if(val.Land == "NL"){
                            stationsnamen.push(val['Namen'].Lang.toString());
                            stationsdata.push(new Array(val.Lat, val.Lon, val['Namen'].Lang.toString()));
                        }
                    });
                });
                process(stationsnamen);
            }

I can't seem to find why it is returning "undefined", as process(array) in the first-to-last line of code above gets the same data, compared to having a separate method.

Current code

Example JSON

Answer 1

Suggestions in typeAhead should be an object rather than plain strings.

You have setup typeAhead to display 'value' property of object

displayKey: 'value'

The easiest way to solve this problem is to wrap source strings into JavaScript objects.

Like this:

stationsnamen.push({value: val['Namen'].Lang.toString() });