如何使用JavaScript调用Zillow API？新手咨询getsearchresults接口调用方法

Hey there! No worries at all—let’s walk through how to call Zillow’s getsearchresults API using JavaScript step by step. I’ll keep things simple since you’re new to working with APIs.

First Things First: Get Your Zillow API Key #

Before you can make any calls, you’ll need a ZWS ID (Zillow Web Service ID). Head over to Zillow’s developer portal, sign up for an account, and request your key. This is required for every API call you make—don’t skip this step!

Understand the Required Parameters #

The getsearchresults endpoint needs at minimum these parameters:

• zws-id: Your unique API key
• address: The street address of the property you want to search (e.g., "123 Main St")
• citystatezip: The city/state/zip code (e.g., "Seattle, WA" or "98101")

You can add optional parameters too (like rentzestimate if you want rental estimates), but let’s start with the basics.

Example Code with Native fetch #

Let’s use JavaScript’s built-in fetch function (no extra libraries needed!) to make the call. Here’s a complete, commented example:

// Replace this with your actual ZWS ID from Zillow
const ZILLOW_API_KEY = "YOUR_ZWS_ID_HERE";

// Define the property you want to search for
const searchDetails = {
  address: "123 Main Street",
  citystatezip: "Austin, TX",
  zws-id: ZILLOW_API_KEY
};

// Convert the parameters into a URL-friendly string
const queryString = new URLSearchParams(searchDetails).toString();
const apiEndpoint = `https://www.zillow.com/webservice/GetSearchResults.htm?${queryString}`;

// Make the API call
fetch(apiEndpoint)
  .then(response => {
    // Check if the request was successful
    if (!response.ok) {
      throw new Error(`Request failed with status: ${response.status}`);
    }
    // Zillow returns XML, so we'll grab the raw text first
    return response.text();
  })
  .then(xmlResponse => {
    // Parse the XML into a document we can work with
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlResponse, "application/xml");

    // Check if the API returned an error
    const statusCode = xmlDoc.querySelector("code").textContent;
    if (statusCode !== "0") {
      const errorMessage = xmlDoc.querySelector("text").textContent;
      throw new Error(`Zillow API Error: ${errorMessage} (Code: ${statusCode})`);
    }

    // Extract and log the data you care about
    const propertyResults = xmlDoc.querySelectorAll("result");
    propertyResults.forEach(result => {
      const streetAddress = result.querySelector("address > street").textContent;
      const homeValue = result.querySelector("zestimate > amount").textContent;
      const propertyType = result.querySelector("useCode").textContent;

      console.log(`Property: ${streetAddress}`);
      console.log(`Type: ${propertyType}`);
      console.log(`Zestimate: $${homeValue}\n`);
    });
  })
  .catch(error => {
    // Handle any errors (network issues, API errors, etc.)
    console.error("Something went wrong:", error);
  });

Important Notes to Avoid Headaches #

• CORS Issues: If you run this code directly in a browser, you’ll likely hit a CORS error. Zillow’s API doesn’t support direct frontend calls from most browsers. To fix this, either:
  • Run the code in a Node.js environment (backend), or
  • Set up a proxy server to forward your requests (e.g., using Create React App’s proxy config if you’re building a React app)
• API Limits: Zillow has rate limits for their API—don’t spam requests, or your key might get temporarily blocked. Check their docs for the latest limits.
• XML vs JSON: Zillow’s API returns XML by default. If you prefer JSON, you can add output=json to your query parameters, but XML is the standard format for this endpoint.

That’s it! Start with this example, replace the placeholder values with your own, and tweak the data extraction part to get exactly what you need.

内容的提问来源于stack exchange，提问作者user9210794