Блог

В настоящее время я визуализирую список данных, возвращаемых из API, используя map() функцию следующим образом:

 renderLocation() {
    return this.props.locations.map(location => {
      return (
        <div key={location.id}>
          <div className="location">
            <h1>
              {location.name}
              {location.airport_code}
            </h1>
            <div className="location-secondary-info">
              <span>
                <i className="material-icons">airplanemode_active</i>
                {location.description}
              </span>
            </div>
          </div>
        </div>
      );
    });
  }
  

Теперь я хочу отфильтровать отображение, чтобы отображались только те, locations которые имеют правильное name значение поля. Мои данные API выглядят следующим образом:

Я хочу, чтобы он отображался только в том случае, locations если это locations.name действительно допустимое название города.

Так, например, местоположение с name of "Chicago O'Hare" было бы допустимым названием города и должно отображаться. Однако местоположение с name of "Chicago O'Hare A5C" не следует отображать, поскольку в конце у него есть A5C , что делает его недействительным.

Одним из подходов может быть использование регулярного выражения для фильтрации местоположений на основе наличия буквенно-цифрового суффикса подстроки в name поле местоположения с помощью следующего:

 const filteredLocations = this.props.locations.filter(location => {
    return !location.name.match(/[A-Z0-9] $/)
});
  

Приведенная выше логика в основном гласит:

«фильтровать все местоположения, в конце названия местоположения нет буквенно-цифрового слова».

Интеграция этого в вашу renderLocation() функцию может быть достигнута с помощью:

 renderLocation() {

    /* Filter locations with name that doesn't have alphanumeric suffix word   */
    const filteredLocations = this.props.locations.filter(location => {
        return !location.name.match(/[A-Z0-9] $/)
    });

    /* Render only the filtered location with name Chicago O'Hare */ 
    return filteredLocations.map(location => {
      return (
        <div key={location.id}>
          <div className="location">
            <h1>
              {location.name}
              {location.airport_code}
            </h1>
            <div className="location-secondary-info">
              <span>
                <i className="material-icons">airplanemode_active</i>
                {location.description}
              </span>
            </div>
          </div>
        </div>
      );
   });
}
  

Надеюсь, это поможет