How to lookup for specific city when there are multiple returned values?

[stefanobartoletti]

Hi, I'm trying to lookup a specific city (Valencia, Spain), but I cannot find a way to have this library return my the exact value.

If I use

const cityLookup = cityTimezones.lookupViaCity('Valencia')
console.log(cityLookup)

I get

[
  {
    "city": "Valencia",
    "city_ascii": "Valencia",
    "lat": 39.48501752,
    "lng": -0.400012046,
    "pop": 806652,
    "country": "Spain",
    "iso2": "ES",
    "iso3": "ESP",
    "province": "Comunidad Valenciana",
    "timezone": "Europe/Madrid"
  },
  {
    "city": "Valencia",
    "city_ascii": "Valencia",
    "lat": 10.22998151,
    "lng": -67.9800214,
    "pop": 1569526.5,
    "country": "Venezuela",
    "iso2": "VE",
    "iso3": "VEN",
    "province": "Carabobo",
    "timezone": "America/Caracas"
  }
]

while if I use

const cityLookup = cityTimezones.findFromCityStateProvince('Valencia Spain')
console.log(cityLookup)

I get

[
  {
    "city": "Alicante",
    "city_ascii": "Alicante",
    "lat": 38.3512199,
    "lng": -0.483640721,
    "pop": 296345,
    "country": "Spain",
    "iso2": "ES",
    "iso3": "ESP",
    "province": "Comunidad Valenciana",
    "timezone": "Europe/Madrid"
  },
  {
    "city": "Castello",
    "city_ascii": "Castello",
    "lat": 39.97041424,
    "lng": -0.05000757,
    "pop": 176360,
    "country": "Spain",
    "iso2": "ES",
    "iso3": "ESP",
    "province": "Comunidad Valenciana",
    "timezone": "Europe/Madrid"
  },
  {
    "city": "Valencia",
    "city_ascii": "Valencia",
    "lat": 39.48501752,
    "lng": -0.400012046,
    "pop": 806652,
    "country": "Spain",
    "iso2": "ES",
    "iso3": "ESP",
    "province": "Comunidad Valenciana",
    "timezone": "Europe/Madrid"
  }
]

In both cases, I have more results that I need, and I'd like to have a way to search in example for "Valencia Spain" (to disambiguate between other cities with the same name in different countries), but without returning other cities in Spain whose name is not "Valencia"

Is it possible to do so? what exact string should I use as lookup?

[TheAhmedDiaa]

idk if that will help you in your project or not but im making a small project using react and i made a search par and when the user searched for a city i list for him the response and then when he chooses one i just take what he clicked on and take the first city from the response:

  const [city, setCity] = useState("");
  const results = cityTimezones.findFromCityStateProvince(city);
  let [selectedCity, setSelectedCity] = useState("");

  function sendTimeZone() {
    if (results.length > 0) {
      setSelectedCity(results[0]);
      console.log(`search, Selected timezone: ${results[0].timezone}`);
    } else {
      console.log("search, No results found for the given city.");
      return;
    }
  }

          <input
            type="text"
            name="city"
            id="search"
            value={city}
            placeholder="Search for a city..."
            className="search-input w-full md:w-1/2 bg-(--color-surface) border border-(--color-border) focus:outline-none focus:ring-2 focus:ring-(--color-primary) transition-all duration-300 rounded-lg p-2 shadow-sm"
            onChange={(e) => setCity(e.target.value)}
            onKeyUp={(e) => {
              if (e.key === "Enter") {
                sendTimeZone();
                setCity("");
              }
            }}
          />
          <Button
            onClick={() => {
              sendTimeZone();
              setCity("");
            }}
            className="search-button"
          >
            Search
          </Button>
        </div>
        {results.length > 0 && (
          <ul className="search-results list-none p-4 absolute w-full md:w-1/2 left-1/2 transform -translate-x-1/2 overflow-y-auto z-50 max-h-28 top-full bg-(--color-surface) border border-(--color-border) shadow-lg rounded-lg">
            {results.slice(0, 20).map((city, i) => (
              <li
                key={i}
                className="search-result-item flex justify-between p-2 hover:bg-(--color-primary-hover) transition-all duration-300 rounded-lg"
                onClick={() => {
                  setSelectedCity(city);
                  setCity("");
                }}
              >
                {city.city}, {city.province}, {city.country}{" "}
                <span className=" text-(--color-text-h-muted)">
                  {city.timezone}
                </span>
              </li>
            ))}
          </ul>
        )}

hope that helps.