Множественный объектный массив не работает в At.js

Question

Я использую плагин At.js. Работает нормально для одного объекта ( демо)

var names1 = ["Jacob", "Isabella", "Ethan", "Emma", "Daniel", "Madison"];
var names = $.map(names1, function(value, i) {
  return {
    'id': i,
    'name': value,
    'email': value + '@yahoo.com'
  };
});

Но когда я пытаюсь добавить несколько объектов, это не работает ( демо). Я знал, что код является проблемой. Я хочу отобразить описание, когда пользователь выбирает имя человека, использующего @ тег.

$(function() {
  $.fn.atwho.debug = true

  var names1 = [{
      "name": "Jacob",
      "description": "description one description one description one"
    },
    {
      "name": "Isabella",
      "description": "description two description two description two"
    }
  ];

  var names = $.map(names1, function(value, description, i) {
    return {
      'id': i,
      'name': value,
      'email': description
    };
  });

  var at_config = {
    at: "@",
    data: names,
    headerTpl: '<div class="atwho-header">Service List <small>↑&nbsp;↓&nbsp;</small></div>',
    insertTpl: '${email}',
    displayTpl: "<li>${name}</li>",
    limit: 200
  }
  $inputor = $('#inputor').atwho(at_config);
  $inputor.caret('pos', 47);
  $inputor.focus().atwho('run');
});

Answer 1

Функция map в Jquery не принимает каждый элемент объекта в качестве аргумента функции, вы получаете весь объект (элемент в списке), а затем вам нужно извлечь имя и описание. Вы были почти там.

$(function() {
  $.fn.atwho.debug = true

  var names1 = [{
      "name": "Jacob",
      "description": "description one description one description one"
    },
    {
      "name": "Isabella",
      "description": "description two description two description two"
    }
  ];

  var names = $.map(names1, function(value, index) { //Here I have only used value
    return {
      'id': index,
      'name': value.name, //Here I take value.name from the object
      'email': value.description //And value.description from the object
    };
  });

  var at_config = {
    at: "@",
    data: names,
    headerTpl: '<div class="atwho-header">Service List <small>↑&nbsp;↓&nbsp;</small></div>',
    insertTpl: '${email}',
    displayTpl: "<li>${name}</li>",
    limit: 200
  }
  $inputor = $('#inputor').atwho(at_config);
  $inputor.caret('pos', 47);
  $inputor.focus().atwho('run');
});