Предварительное заполнение данных Jquery возвращает значение null, хотя HTML-тег data-pre имеет ожидаемые значения

Я использую плагин ввода токена Jquery для автозаполнения, и prepopulating data. автозаполнение выглядит нормально, но у меня есть некоторые проблемы с предварительным заполнением данных.

Это мой javascript:

tokenOptions = {
    theme: 'facebook',
    searchingText: null,
    hintText: null,
    noResultsText: null,
    allowFreeTagging: true,
    tokenValue: 'name',
    searchDelay: 1000,
    prePopulate: $('#citizen_profile_attributes_city').data('pre')

}

$(document).ready ->

  console.log('prepopulate:' + tokenOptions.prePopulate)


  $("#citizen_profile_attributes_city").tokenInput("/cities.json",
    tokenOptions )

Это часть формы (в HAML):

 = f.text_field :city, :data  => { 'pre' => @profile.pre_populate_city } , :id => 'citizen_profile_attributes_city'

Это метод pre_populate_city:

  def pre_populate_city
    city_name   = self.city
    city_id      = (City.find_by_name city_name).id
    { "id" => city_id, "name" => city_name}.to_json
  end

Это возвращается html:

Как видите, в html есть атрибут данных с правильными значениями, но я не вижу их в предварительно заполненной области.

В моем javascript я использовал журнал консоли, чтобы увидеть вывод, он возвращает ноль, когда я пытаюсь запросить этот идентификатор в консоли, я получаю желаемые атрибуты:

Вопрос - что не так с этим кодом?

Примечание. Я также пытался изменить идентификатор в jquery для #token-input-citizen_profile_attributes_city.

РЕДАКТИРОВАТЬ После переноса объекта в массив предварительное заполнение работает, но предварительно заполняет неопределенным:

  def pre_populate_city
    city_name   = self.city
    city_id      = (City.find_by_name city_name).id
    [{ "id" => city_id, "name" => city_name}.to_json]
  end

EDIT2

синтаксический анализ предварительного заполнения с помощью $.parseJSON не помогает:

ИЗМЕНИТЬ3

журнал консоли с $.parseJSON