Oops! There was an issue serializing the `propertiesForSale` data retrieved from `getStaticProps` for the "/". It seems that `undefined` is not a valid JSON serializable value

I am attempting to retrieve data from the Zillow API using RapidApi. As a newcomer to NextJS, I'm exploring different ways to integrate APIs into my projects.

Below is the snippet of code found in my index.js:

export async function getStaticProps() {
  const propertyForSale = await fetchApi(`${baseUrl}/propertyExtendedSearch/list?location=Texas&purpose=for-sale&hitsPerPage=6`)
  const propertyForRent = await fetchApi(`${baseUrl}/propertyExtendedSearch/list?location=Texas&purpose=for-rent&hitsPerPage=6`)

  return {
    props: {
      propertiesForSale: propertyForSale?.hits,
      propertiesForRent: propertyForRent?.hits,
    }
  }
}

Additionally, here is the segment of code located within my fetchApi.js file:


export const baseUrl = 'https://zillow-com1.p.rapidapi.com'

export const fetchApi = async (url) => {
    const { data } = await axios.get ((url), {
        headers: {
            'x-rapidapi-host': 'zillow-com1.p.rapidapi.com',
            'x-rapidapi-key': '8e2e11ca6dmsh77a061b9b854a4ep1762d7jsne6e273637c9f'
        }
    })
    return data;
}

Answer №1

After running your request in Postman, I discovered that it did not yield any results

curl --location --request GET 'https://zillow-com1.p.rapidapi.com/propertyExtendedSearch/list?location=Texas%26purpose=for-sale%26hitsPerPage=6' \
--header 'x-rapidapi-host: zillow-com1.p.rapidapi.com' \
--header 'x-rapidapi-key: 8e2e11ca6dmsh77a061b9b854a4ep1762d7jsne6e273637c9f'

The response was:

{
    "status": "error",
    "statusMessage": "Endpoint no found! Check your query URL and parameters!"
}

Please double-check your GET request outside of the code snippet and then repost your question. It's advisable to verify the presence of a status field with a value of success before accessing other data for a stable solution.

Answer №2

//modify the ?. touch to ?.data just like how it's shown below

async function fetchPropertyDetails() { const forSaleProperties = await getDataFromApi(

${baseUrl}/propertyExtendedSearch/list?location=Texas&purpose=for-sale&hitsPerPage=6
) const forRentProperties = await getDataFromApi(
${baseUrl}/propertyExtendedSearch/list?location=Texas&purpose=for-rent&hitsPerPage=6
) }

return { props: { saleProperties: forSaleProperties?.data, rentProperties: forRentProperties?.data, } } }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can a webpage be redirected to another page while passing along the id from the original page?

https://i.sstatic.net/3LhYJ.png I have a page that displays shop names and addresses along with an edit function in views.py: def update_shop(request, id): context = {} # * fetch the object related to passed id obj_shop = get_object_or_404(VideoL ...

Issue with refreshing a material

When updating a transaction, I am encountering the issue of inadvertently deleting other transactions. My goal is to update only one transaction. Can someone review my backend logic to identify the root cause? Schema Details: const mongoose = require(&apo ...

There are times when the `window.location.replace` function does not

I have implemented a Bootstrap Dropdown feature that allows users to select a language for site translation, append the URL with the selected language, and then reload the page. Initially, it works well for the first set of translations like en|es. Howeve ...

Alternative to using the disabled attribute in JavaScript to make a checkbox read-only option

Does anyone know how to make a checkbox readonly so that its value can be submitted, while also disabling it? Using the disable attribute prevents the value from being submitted, and setting it as readonly doesn't seem to work for checkboxes. Your as ...

Add unique content to a div upon page reload

Whenever the page is refreshed, I would like to add a random anchor from an array into a specific div. Here's my current code: <div id="exit-offer" class="exit-offer-dialog"> <div class="offer-content" id="banner-load"> <bu ...

Display various items using only one EJS scriptlet tag

I'm currently facing a challenge with rendering two objects using EJS. I am curious to know if it is feasible to render them both within the same pair of scriptlet tags or if they need to be rendered separately? So far, I have been able to successful ...

Implementing a loading spinner in React Native until the component is fully mounted

I am dealing with a List component that takes some time to load. I am trying to display a spinner until the component is loaded and mounted, but all my attempts have been unsuccessful. Here is the approach I am currently attempting: class List extends R ...

How to easily click on an empty space using Protractor

I am currently using Protractor to run tests on an Angular JS project. On one particular page, I need to trigger the auto save feature by clicking on any blank area after filling in all the required fields. However, I've been unable to figure out how ...

I have been working on developing a Chrome extension for a StopWatch, but I am facing an issue where the Stopwatch resets automatically whenever I click

I am currently working on a stopwatch chrome extension and facing an issue where clicking anywhere outside the extension popup resets the stopwatch to zero. I would like the stopwatch to keep running until I manually stop it or close the browser. Can someo ...

Inquiries about creating collapsible content using html, css, and javascript

I have been exploring collapsibles and noticed that many of them use extra code that seems unnecessary or confusing. I decided to create a simple one based on my logic, but it's throwing an error: app.js:4 Uncaught TypeError: Cannot read property &apo ...

Iterate over various selection lists and tally the frequency of each option being chosen

I am currently working on a website that requires multiple instances of the same select-option to be created. I want to keep track of how many times each option is selected, and save that count as a variable to be used in a PHP email function. For instanc ...

Delete the click event listener that was previously assigned by a different script

After extensive investigation using the Chrome developer tools, I have identified a click event listener that needs to be removed: https://i.sstatic.net/dnB3Q.png I successfully removed the listener using the developer tools. Further analysis revealed th ...

Searching in binary for the number closest to the target float value

Seeking assistance with a float array conundrum! I am trying to identify the closest float value to a target number within the array. My attempt involved utilizing a basic binary search algorithm in JavaScript, but I've hit a roadblock. function bina ...

Conceal the object, while revealing a void in its place

Is there a way to hide an image but keep the containing div blank with the same dimensions? I want it to appear as if no content was there, maintaining the original width and height. For example: http://jsfiddle.net/rJuWL/1/ After hiding, "Second!" appea ...

What is the best way to send a variable or query to a Python script from PHP using an Ajax request?

A Python script I have takes parameters or a SQL query from the PHP file, which I am running by calling an Ajax function. The PHP and Ajax call code has been added here. A variable "action" is created to check different cases. While I can execute action = ...

Switching between states using JavaScript

Here is a code snippet I'm working with: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="C:\Users\rapandey\Documen ...

The Jquery confirmation dialogue does not seem to be functioning properly within the Content Place Holder

I've encountered an issue with a JQUERY Confirm dialogue where it works perfectly fine until I place it on a page that is within a masterpage. The confirm alert pops up for a split second and disappears. window.onload = function() { $("#ehi").cli ...

Saving an image and form data together in local storage can be accomplished by using JavaScript

Is there a way to save an image to local storage along with form data? I would like to store the form data in a database and keep the image in local storage. Any help would be greatly appreciated. Thank you! <form id="saveImageForm"><input type ...

"Failure to Update: Ajax Auto-Refresh Table Failing to Refresh

I'm facing a tricky issue with my code that I just can't seem to resolve. Currently, I am using Ajax and setTimeout to retrieve data. The problem arises when the data doesn't refresh automatically (if I manually navigate to the page getdata. ...

Incorporate the key as a prop within a Child Component in a React application

I am trying to display a list of elements in React, where the key of each element is used as an index in front of the item. However, when I try to access props.key, it just returns undefined. Does anyone have any suggestions on how to access the key proper ...