Приложение на Next.js.Как реализовать поиск по объекту городов?

Question

[Андрей Неумыванный]

Разрабатываю приложение на Next.js. Не могу понять как правильно организовать структуру поиска городов.
Есть вот такая структура данных:


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

Comments

[Vladislav]

https://developer.mozilla.org/ru/docs/Web/JavaScri...

Answer 1

[Андрей Неумыванный]

Реализован в reduxToolkit

searchCity(state, action){
      if (action.payload.length !== 0) {
        let result = Object.entries(state.cities).filter(el => {
          let isEmpty = Object.keys(el[1]).some(city => city.toLowerCase().includes(action.payload.toLowerCase().trimEnd()))
          if (isEmpty) {
            Object.values(el[1]).map(el => {
              if (el.name.toLowerCase().includes(action.payload.toLowerCase().trimEnd())) {
                el.isQueryItem = true
              } else {
                el.isQueryItem = false
              }
            })
            return el
          }
        })
  
        state.filter_cities = result.reduce((newObj, item) => {
          newObj[item[0]] = item[1];
          return newObj;
        }, {});
  
      } else {
        let result = Object.entries(state.cities).filter(el => {
          Object.values(el[1]).map(el => {
            el.isQueryItem = false
          })
          return el
        })
  
        state.filter_cities = result.reduce((newObj, item) => {
          newObj[item[0]] = item[1];
          return newObj;
        }, {});
      }
    }
  },