Javascript:How do i integrate dynamic dependent city and state code select box with http request?

1

I am trying to create real estate app.I am using Realtor API.When I type the name of a city in an input field I want to fire off http request and get the list of properties for sale in that city.The problem is that in the US there are cities with the same name (in different states).So I need to make both the name of a city and the state code dynamic.If it was just city in question I would put input value in http request, but I don t know how to integrate both city and state code here via select box and make them dynamic. Here s the link to Realtor website to get the idea of what I am trying to achieve.

index.html

<form>
      <input type="text" />
      <br />
      <br />
      <button>Search</button>
    </form>

app.js

document.querySelector("form").addEventListener("submit", searchProperties);
let inputVal = document.querySelector("input").value;

function searchProperties() {
  fetch(
    "https://realtor.p.rapidapi.com/properties/v2/list-for-sale?sort=relevance&city=New%20York%20City&limit=200&offset=0&state_code=NY",
    {
      method: "GET",
      headers: {
        "x-rapidapi-host": "realtor.p.rapidapi.com",
        "x-rapidapi-key": "My_API_Key",
      },
    }
  )
    .then((res) => {
      return res.json();
    })
    .then((response) => {
      console.log(response);
    })
    .catch((err) => {
      console.log(err);
    });
}

This is the piece of code in question

sort=relevance&city=New%20York%20City&limit=200&offset=0&state_code=NY"
2

Do you want to allow a user to just enter a city and a state via selects (easy), or do you want a user to enter a city which then allows them to narrow the search by providing a second select for a state (slightly harder)?

3

I would prefer second option, just like on Realtor website.
I accidentally posted this question in the Back End Help section.I don t know if I am in the right place, i am only familiar with front end technologies.

4

There are various ways to do this, but I think simplest:

  • Put all the unique city names in the US into an object.
  • Each key a city name.
  • Each value should be an array of states (most will just have a single entry)

Component with some state, where state is going to include city and state. Both should start off as something empty (empty string, undefined or null) – once they both have values, you make your HTTP request, if either of them don’t, you don’t.

City value comes from a <select> that uses your cities object keys to populate the <option>s. If a user selects a city, the state value for city gets populated.

Once that has a value, you show a second <select>. The <option>s for that come from whatever city was chosen.

If the city only has a single value, then how that’s handled is probably going to be different (there is no point making the user actually use the select when there’s a single value).

Anyway, once the state has both city and state, make request to whatever endpoint exists

(Edit: I moved the question to frontend)

1 Like
5

Thank you for your reply.I managed to find JSON file with list of all the cities and their corresponding states in the US.Hopefully that should make things easier for me.