хранить данные JSON в массиве в Angular TypeScript

Question

Я столкнулся с проблемой при использовании библиотеки упоминаний Angular.

Вот мой машинописный код.

items: Object[] = ["jay","roy","gini","rock","joy","kiya"];

Я использую этот определенный именованный массив items в моем component.html file

<input  type="text" id="cname" name="cname" placeholder="Type  Here.." [mention]="items">

поэтому он создает текстовое поле и дает подсказку, когда я набираю любое имя пользователя.

Предположим, я набрал @j, тогда он предложит все имена, начинающиеся с имени j, и после ввода будет введен в текстовое поле со знаком @. Таким образом, в основном это дает возможность автоматического поиска по массиву, и для этого я импортировал библиотеку упоминание в мое приложение Angular7.

Я разрабатываю проект, в котором все пользователи приходят из веб-сервиса. Поэтому мне нужно сохранить этих пользователей в этом items названном массиве.

Формат JSON выглядит следующим образом.

 [
   {
      "attributes":  {
        "User": "jay"
    }
},
   {
      "attributes": {
        "User": "roy"
    }
},
    {
      "attributes":{
        "User": "kiya"
    }
},
    {
      "attributes":{
        "User": "gini"
    }
},
   {
      "attributes": {
        "User": "rock"
    }
},
   {
      "attributes": {
        "User": "joy"
    }
}

]

Приведенные выше данные JSON поступают с веб-сервера, и я сохраняю их в переменной. Поэтому я хочу сохранить это в указанном выше массиве с именем items, чтобы в моем текстовом поле при наборе текста он мог давать автозаполнение с реальными данными.

Я пробовал эту вещь, но во время ввода в текстовом поле она не дает никаких предложений.

Answer 1

Пожалуйста, добавьте упоминание конфигурации , когда элементы представляют собой массив объектов. Поле объекта, которое должно использоваться как label , должно быть задано как labelKey в конфигурации упоминания следующим образом.

<input type="text" [mention]="items" [mentionConfig]="{ labelKey:'User'}">

Обновление

Поскольку вопрос был обновлен массивом объектов с двумя вложенными свойствами, упоминание конфигурации использовать нельзя, поскольку упоминание поддерживает только максимум одного уровня вложенного свойства. Проверьте исходный код здесь . Я также поднял проблему в github по этому поводу. Так что в этом случае мы должны были бы создать массив меток из массива объектов следующим образом.

items = items.map((item) => item.attributes.User);

Answer 2

Если вам нужна помощь с отображением результата вашего веб-сервиса в массив строк, то вот что должно сработать.

Обновленный ответ для последнего json.

this.myWebService.myWebServiceMethod.subscribe(result => {
    this.items = result.map(item => {
        return item.attributes.User;
    }
}

Как указывает @ abd995, у этого метода могут быть проблемы с производительностью, поскольку вы перебираете массив.Помните, как часто вы выполняете приведенный выше код.Если ваш массив относительно мал, тогда вам не о чем беспокоиться, но если у вас есть записи 5k +, вы можете подумать об обновлении API, чтобы возвращать данные в лучшем формате - с которым вам не нужно манипулировать.