Как отобразить данный json список городов в автокомплите?

Question

[Денис]

https://codesandbox.io/s/fristyr-react-gx25s
Импортирую json список.

import cities from 'cities.json';

Мапирую его.

const citiesList = cities;

const citiesListNames = citiesList.map( item => {
  return item.name 
} )

console.log(citiesListNames)

Консоль выдает список названия стран, вроде все ок.
https://monosnap.com/file/BVx9Hbwb6d8PbXEmeKBUFzsg...

Для автокомплита я использовал эту библиотечку https://github.com/JedWatson/react-select довольная простая и делает то что мне нужно.
Она использует массив из объектов для того чтоб отображать выпадающий селект.

const options = [
  { value: 'Amsterdam', label: 'Amsterdam' },
  { value: 'London', label: 'London' },
  { value: 'Moscow', label: 'Moscow' },
];

Сам компонент вот:

<Select
            value={selectedOption}
            onChange={this.handleChange}
            options={options}
            name="city"
            className={styles.weather_city_select}
          />

У меня немного не получается передать мапированный список стран.
Я передавал в пропсы options={options} const citiesListNames но приложение зависает от такого количества данных.

Так вот. Что мне нужно сделать чтоб получить то действие которое я ожидаю?

Answer 1

[0xD34F]

const citiesListNames = citiesList.map( item => {
  return item.name 
} )

Круто. Непонятно только, как после подобной манипуляции отличить Париж в Иль-де-Франс от Парижа в Онтарио. Или Москву Московской области от Москвы Пенсильвании.

приложение зависает от такого колличества данных

Как напрямую ограничить количество показываемых записей - что-то в документации не нашёл такой возможности. Можно попробовать закостылить это дело.

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

Comments

[Денис]

Я кстати вот так вот сделал

import cities from './city.list.json';


const citiesList = cities;

const citiesListNames = citiesList.map( item => {
  return {
    value: item.name,
    label: item.name,
  }
} )

const options = citiesListNames

Попробовал ваш костыль) спасибо) но у меня скорость маленькая прям видно когда ввожу новую буквую он подтупливает чуток. У вас так же?

[Денис]

А куда можно залить этот json чтоб тянуть его ? Просто все сервисы которые я открывал не могли воспринять тот объем данных что я вводил

[Денис]

Круто. Непонятно только, как после подобной манипуляции отличить Париж в Иль-де-Франс от Парижа в Онтарио. Или Москву Московской области от Москвы Пенсильвании.

А вот на счет этого я взял другой json именно от того сервиса откуда саму инфу о погоде тяну. Там есть регион, по нему вроде должно быть все порятно

[0xD34F]

Денис,

У вас так же?

Нет. Но это потому, что у меня железо не самое дохлое.

А куда можно залить этот json чтоб тянуть его ?

В базу данных, каждый город - отдельная строка таблицы. Можно будет выполнять поиск и ограничивать объём выдачи. Или выбрасывайте этот json и ищите сервис, который позволяет подобное.