Обрезать текст в массиве объекта? - PullRequest
0 голосов
/ 06 ноября 2019

, поэтому у меня есть массив объектов, и проблема в том, что возвращаемые имена довольно длинные. Как я могу получить результат имен выглядит как returnedArray: [ {name:'reallyy..',age:'28',hobby:'blah'},{name:'another..',age:'28',hobby:'something'} ]

resultArray: [

  {
    name: 'realllyyyyyyLongggname',
    age: '28',
    hobbit: 'blah'
  },

  {
    name: 'anotherrealllyyyyyyLongggname',
    age: '28',
    hobbit: 'blah'
  }
]

Кроме того, как использовать атрибут заголовка html, чтобы всплывающая подсказка отображала этот дополнительный текст?

1 Ответ

1 голос
/ 06 ноября 2019

Это зависит от нескольких вещей, например, откуда поступают эти объекты. Если данные поступают с сервера, вы можете обрезать имена на стороне сервера, прежде чем они попадут на сторону клиента. Если у вас нет доступа к коду сервера, вы можете усечь усеченные имена на стороне клиента самостоятельно:

const maxLength = 50;
const resultArray = [{ ... }].map(i => {
  if (i.name <= maxLength) return i;

  const shortenedName = i.name.substring(0, maxLength + 1);
  i.name = shortenedName + '...';
  return i;
});

Извините, я пропустил второй вопрос, который у вас возник. Если вы хотите иметь доступ к полному имени, вам нужно изменить вышеуказанный цикл, чтобы он не перезаписывал имя, а вместо этого сохранял второе значение для короткого имени:

const rawData = [
  {
    name: 'realllyyyyyyLongggname',
    age: '28',
    hobbit: 'blah'
  },
  {
    name: 'anotherrealllyyyyyyLongggname',
    age: '28',
    hobbit: 'blah'
  }
];

const maxLength = 10;
const resultArray = rawData.map(i => {
  if (i.name <= maxLength) i.shortName = i.name;
  else {
    const shortenedName = i.name.substring(0, maxLength + 1);
    i.shortName = shortenedName + '...';
  }

  return i;
});

console.log(resultArray);

таким образом, вы можете дать 'name' атрибуту title и 'shortName' другим местам, которые в этом нуждаются

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...