Meraj•2y ago

Cannot fetch data for a component from an API

Hello, I want to fetch data that I successfully collect from a mongodb database and then display it in a dropdown component. But I am unable to receive it and receive undefined instead. This is my API, a [...param].js in folder api/calcCart:

async function handler(req, resp){
   // mongoose code
 const usersArray = await userscollection.findOne(query);
    **return resp.status(200).send({data: usersArray})**
}
 
export default handler

async function handler(req, resp){
   // mongoose code
 const usersArray = await userscollection.findOne(query);
    **return resp.status(200).send({data: usersArray})**
}
 
export default handler

This is the function where I fetch this usersArray. It is in index.js:

const calculateCart = async (ipAddress, browserName) =>{
         
        const resp = await fetch(`/api/calcCart/${ipAddress}/${browserName}`, {
          method: 'POST'
        })
        .then((res) => {console.log("SUCCESS in Fetching Product Data", res)
        
      
      }).then(data =>{console.log("SUCCESS in Resolving Product Data:",data)})
        .catch(e => console.log("ERROR:" + e))
  
      }

const calculateCart = async (ipAddress, browserName) =>{
         
        const resp = await fetch(`/api/calcCart/${ipAddress}/${browserName}`, {
          method: 'POST'
        })
        .then((res) => {console.log("SUCCESS in Fetching Product Data", res)
        
      
      }).then(data =>{console.log("SUCCESS in Resolving Product Data:",data)})
        .catch(e => console.log("ERROR:" + e))
  
      }

This is the component where this function is called, also defined in index.js:

const Drop = ({ open }) => {
  return (
    <div >
      {open === true ? (
        <div className="dropdown_container">
          <div
            className="dropdown_item"
            onClick={
            calculateCart(props.ip, props.browser)
           >
            Fetched data
          </div>
  
        </div>
      ) : null}
    </div>
  );
};

const Drop = ({ open }) => {
  return (
    <div >
      {open === true ? (
        <div className="dropdown_container">
          <div
            className="dropdown_item"
            onClick={
            calculateCart(props.ip, props.browser)
           >
            Fetched data
          </div>
  
        </div>
      ) : null}
    </div>
  );
};

I keep seeing this:

SUCCESS in Fetching Product Data 
Response { type: "basic", url: "http://localhost:3000/api/calcCart/::ffff:127.0.0.1/Mozilla/…Linux%20x86_64;%20rv:109.0)%20Gecko/20100101%20Firefox/111.0", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers(7), body: ReadableStream, bodyUsed: false }
index.js:521:32
SUCCESS in Resolving Product Data: **undefined** index.js:524:30

SUCCESS in Fetching Product Data 
Response { type: "basic", url: "http://localhost:3000/api/calcCart/::ffff:127.0.0.1/Mozilla/…Linux%20x86_64;%20rv:109.0)%20Gecko/20100101%20Firefox/111.0", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers(7), body: ReadableStream, bodyUsed: false }
index.js:521:32
SUCCESS in Resolving Product Data: **undefined** index.js:524:30

If it is being resolved successfully, why is there undefined? If someone could kindly guide me. I have been on this for almost two weeks. Thank you.

2 Replies

ttay24•2y ago

Can you hit your api successfully using postman or another application like that? Is this meant to be a POST without any data? I feel like you’re also probably consuming the promise in the first “then”. If you’re expecting a JSON response, then you need to return response.json()

MerajOP•2y ago

I've never used Postman but I managed to get it to work using await on response.json(). then(async (response) => { const data = await response.json(); console.log("SUCCESS in Fetching Product Data", Object.values(data))}