Questions tagged [fetch-api]
The Fetch API revolutionizes the way we make asynchronous HTTP requests, surpassing XHR with its advanced capabilities in managing redirects and seamlessly interacting with CORS and Service Workers.
I am trying to retrieve all of my published blog posts from DatoCMS. Currently, I have implemented the code below. The issue I am facing is that it only retrieves 65 posts when I know I have more than 100... Can anyone help me figure out what I might be d ...
Let's dive into the difference between AJAX and Fetch without involving CORS. I want to understand why an AJAX POST request works flawlessly while a Fetch POST request fails! Currently, I am using jQuery and AJAX for both GET and POST operations. Whe ...
I'm facing some challenges with React fundamentals :/ I have a piece of code that creates a table using JSON data: import React from 'react' import { DataTable } from 'react-data-components'; function createTable(data) { ...
Trying to understand and implement two different API data fetching methods in React app development. The first method involves using the JavaScript Fetch API, while the second method utilizes the async/await syntax. I am currently experimenting with both a ...
I am currently developing a website where I need to retrieve reports from mongoDB and display markers on a map based on the locations of these reports. However, I am facing an issue where this functionality only works once when I initially open the website ...
Looking for some assistance with fetching data from a front-end (React) to the raw value in JSON. Specifically, I'm having trouble with the login functionality. When I input my email and password, the response should match what I see in POSTMAN, but instea ...
I am faced with a straightforward setup where a Next.JS server-side component is responsible for fetching and displaying a post. The challenge lies in setting the page title to reflect the title of the post, requiring me to call my posts API endpoint twice ...
I'm facing a challenge in trying to integrate two libraries into a single project: fetch-node, an ES module, and Express, which follows the CommonJS format. The issue arises from needing to import fetch-node using: import fetch from 'node-fetch&a ...
console.log(result); The code above logs the result in the console every time there is an onChange event in the input field. I am exploring a solution to prevent the component from re-rendering when the input value changes. import "./home.css"; ...
I am currently developing a feature for my application that allows users to add a new project to a timesheet system. To achieve this, I have created a Modal with a form inside. The form includes a Select field that should display all existing user names f ...
In my current setup, I have a nodejs app configured as follows: app.post('/action', (req, res) => { ... const option = req.body.option ... switch (option) { case 'getinfo': objectToSend = {"foo": "bar"} // I att ...
Despite trying to implement the SSG operation with the fetch option {cache: 'force-cache'}, I consistently received the same data even when the mock server's data changed. I found that using the fetch option {cache: 'no-store'} does change the data, but t ...
Using react-cookies, I am trying to transfer data from the client side to the server side. However, when examining the request in NodeJS, I cannot locate any cookies in the headers or elsewhere. It seems that the cookies may not have been sent. After some ...
Currently, I am engaged in a TypeScript project where I am fetching data from an endpoint. The issue arises when I attempt to assign the retrieved data to my state variable nft using the useState hook's setNft function. An error is being thrown specif ...
In my new nextjs 13 project, I'm attempting to perform a fetch operation (unsure if it's related to JavaScript or nextjs) and using console.logs to monitor the code execution. let url = `${BASE}/${module}/${path}`; url += "?" + new URLSearc ...
I'm new to JavaScript and experimenting with the map() function. However, I am only seeing one iteration in my case. The other elements of the array are not being displayed. Since this API generates random profiles, according to the response from the API ...
I am currently using fetch to send a POST request and retrieve data from an API on the server side (using nextjs 13 + node 18). Interestingly, I can successfully retrieve the data using postman and axios, but not with fetch. Below is the snippet of code ...
My code seems to be having an issue where the data fetched is not displaying on my website. I can see the data when using console.log(data), but nothing shows up when using src={data.img1}. async function getData() { const res = await fetch("http:/ ...
I've been working on a personal project with Next.js and TypeScript. I'm attempting to fetch data from an API and then map the items, but I'm running into issues. When I use console.log, it returns undefined. The file is located in the pages ...
After extensively studying ES6 documentation and the changes it brings, I am eager to incorporate the new oop syntax along with modern libraries such as fetch. Below is the code snippet I have been working on: apiCall(url, thisAlias=this){ fetch(url). ...
When working with third-party APIs in NextJS 14, I encountered two different methods to query the API that resulted in slightly different outcomes. Method 1: Located within the /api folder as a route handler: export async function GET() { const res = aw ...
Over the past few days, I have been working on optimizing a client table for a project. The table contains over 10k clients, and as a result, it was taking a long time to load. The front-end team had implemented pagination, filters, and reordering, which ...
Currently, I am developing a list page using next.js 13 to display a collection of projects. I made an attempt to enable server-side rendering for this feature. The implementation is located in app/team/page.tsx import { useRouter } from 'next/navigation ...
When calling an API using isomorphic-fetch and the Fetch API, I encountered a CORS issue because the API was hosted on a different domain (this worked fine in production). To work on development locally, I had to run Chrome browser in non-secure mode and ...
QUERY: Upon reviewing the following link: Promise.all: Order of resolved values I am doubtful about its relevance to my specific scenario. Can I always expect responses to be in the same order as urls? EXAMPLE: var urls = []; for (var i = 0; i < d ...
I am currently working on testing the retrieval of a local file. Within my project, there exists a YAML configuration file. During production, the filename may be altered as it is received via a web socket. The code functions properly in production, but ...
I'm having trouble showcasing the necessary information from an API response on the frontend. The API fetch code is as follows: async function obtainNFTData(){ const answer = await fetch(`https://api.rarible.org/v0.1/items/${chain}:${address}:${Id}`) ...
Despite reading numerous similar questions, I am still unable to determine how to achieve my goal. I have multiple forms on a single page and I am trying to submit data from each form without refreshing the page. Below is an example of one of the five form ...
Here is an example code snippet showcasing CORS issues: The index.html file is being served on localhost:3000 by a static file server: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link ...
I have a dataset containing multiple images associated with the same product id. import client from "@/lib/fetchWrapper"; export default async function addProductImage({ photo, productId, }: { photo: File[]; productId: string; }) { if ...
I am successfully fetching data from the server, but I can't seem to display it in console.log. The error message I'm encountering is shown below. I have confirmed that the data is being returned as an array. What steps should I take to ensure the fetched ...
I am currently working on a project to retrieve data from mockapi.io, a mock API. However, I am encountering an issue where the fetched data is not displaying in the browser. There are no visible errors, and the browser window remains blank. Interestingly, ...
Recently, I've been diving into creating a quotes app that utilizes a rest API to fetch data and display random quotes at the center of the screen with just a tap. However, I seem to be encountering some hurdles in getting everything to function as in ...
Currently, I am utilizing the fetch API within my React project to retrieve data from a JSON endpoint. One requirement I have is to include a custom User-Agent string in my requests. Upon inspecting my requests, I noticed that the UA string displays as: ...
Currently, I am hosting both the front-end (React) and back-end (nodejs) on the same Linux server. Within my front-end code, there is a fetch request to the back-end that requires the specific IP address and port to be hardcoded like this: fetch('http://1 ...
Hi there! I've been trying to fetch data from the Avascan API and display it on my HTML page, but so far, I haven't had any luck. I've experimented with using the Fetch API, JSON, and AJAX methods, but none of them seem to work for me. Do yo ...
I'm facing an issue with fetching an image from the API and I can't figure out what's causing it. Can anyone help me identify the problem? On top of that, there's an error showing up in the browser indicating that the "src" property is missing when using ...
Encountering an error while attempting to fetch data from the API. See the error image here. export class UserService { baseurl: string = "https://jsonplaceholder.typicode.com/"; constructor(private http: HttpClient) { } listUsers(){ //this ...
As someone who is new to working with async tasks, I'm having trouble understanding why my fetch API call isn't updating my Vue variable even though the data appears correctly in the console log. I've tried using Async/Await without success. ...
Could you please review my code? I have a Next.js and Node API app, and I'm facing an issue with obtaining the cookie from my API in my Next app. The signInUser API that I created should return a generated JWT cookie. However, when I use it in my Next app, ...
The functionality of this component should display JSON data in the console log after entering input into the search bar and hitting the enter key. However, there is a lag where the data doesn't show until the enter key is pressed a second time. Additional ...
As I dive into the world of Next.js coming from React, I've been able to make things work for the most part. However, when I tried creating a server component to test server-side fetching, I encountered some strange issues. Usually, when I start the ...
Struggling to map some elements of JSON to a Table in Customers.jsx, but can't seem to figure out the correct way. How do I properly insert my Fetch Method into Customers.jsx? Specifically managing the renderBody part and the bodyData={/The JsonData/} Fet ...
Currently, I am in the process of developing a webpage using reactjs and have set up a simple REST api/database with nodejs. My main focus right now is on properly utilizing this API from the front end. The objective was to send a JSON payload containing { ...
Struggling with a challenge here: Attempting to send a cookie via a GET request to determine if the user is logged in. The cookie is successfully transmitted to my browser and is visible in the developer tools. When I manually make a request through the UR ...
Having thoroughly reviewed all the MDN documentation on CORS, I am attempting to retrieve resources from a Spring Boot server at localhost:8080 within a ReactJS application at localhost:3000. However, I am not receiving the expected response. Here is the c ...
Currently, I am in the process of developing a poll application that utilizes both Django and React. My approach involves using the fetch API to send POST requests to my Django server and receive detailed information in return for further processing. For a ...
My API is being accessed to retrieve data using this code snippet. It sends the email and password to the API: onSubmitSignIn = () => { fetch('http://localhost:3001/signin', { method: 'post', headers: {'Content-Type': 'application/json'}, ...
I'm having an issue with my AJAX request using javascript fetch. It's only sending an OPTIONS call and not proceeding to make further calls. What's strange is that the response header seems fine, and $.ajax is working as expected. Check out the response h ...
What could be causing the error message "GET http://localhost:3000/api/db/getRideTypes 404 (Not Found)" when attempting to fetch data from the sanity client? Here is a snippet of code from Rideselector.js: //"use client"; import Image from &apo ...
Recently starting to use Python, I am currently using Python's seleniumbase library to scrape a website and need to periodically run this fetch script. While experimenting, I encountered a script timeout error when the response time exceeded around 95 ...
During my exploration of the Next 13 beta version, I encountered a peculiar issue. My goal was to retrieve data from the server-side and display it on the page. However, the "fetch" operation failed on the server side. Below is the code snippet for the Nex ...
Utilizing JavaScript, we perform an API POST request using an external JSON file. The setup involves two main files: order.json and app.js Server information: Ubuntu 22.04 Node v19.2.0 npm 8.19.3 The script retrieves data from the order.js file using the ...
I am facing an issue in logging the error message to the console while everything else seems to be working fine. Specifically, I am unable to log only the message such as "email exists" when the email already exists in the system. const submitHandler = a ...
Can anyone help me with setting up an object to use useState? I am working with the dataMap object that needs to be passed to the setResults function. Any assistance would be greatly appreciated! ? export default function Home() { const [results, setRe ...
I'm looking to use the fetch API to send requests and have those requests handled by Express JS. In my setup, I've put together server.js (Express JS), index.html (home page), and signin.html (sign-in page). index.html <!DOCTYPE html> <html> ...
Currently, in node.js version v18.14.0, my task involves fetching data from port 6666 (the URL is just a placeholder in this instance): await fetch("http://placeholder.com:6666/secret-service", {"method": "GET"}); Upon attem ...
I'm facing an issue: I need to display only the "nameProcess" and "id" in the table that have the attribute "error = true" in the json file. I've fetched the data but now I'm struggling to implement the condition inside my function. Can anyone offer assi ...
I've been developing a Next.js application that originally started as a regular React app created using create-react-app. I'm facing an issue where the cookies are not being sent with my fetch request to the server, despite setting credentials: 'include' i ...
I'm diving deeper into the world of promises in javascript. I grasp the fundamental syntax where promises are used by clients for handling asynchronous tasks like this: async function fetchMovies() { const response = await fetch('/movies'); // waits un ...
When using the fetch function, I encountered an error with the "fetchUrl" argument: Error: Argument of type 'string | undefined' is not assignable to parameter of type 'RequestInfo'. This is the code snippet where the error occurred: ...
After testing my code locally and encountering no issues, I uploaded it to Vercel only to run into the error 405 (Method Not Allowed) during the POST method. Despite checking everything thoroughly, I'm unable to find a solution on my own. Your assistance i ...
I've been struggling with sending JSON data using fetch as the backend keeps receiving an empty object. In my Client JS code, I have the following: const user = "company1"; const username = "muneeb"; const data = {user, username}; fetch("http://127.0.0.1 ...
After several attempts to use fetch for retrieving JSON data from my express server, I have encountered some issues. While the fetch function works well with JSONPlaceholder, it seems to fail when accessing my express code. Below is the snippet of my fetc ...
Currently immersed in a personal coding project, I'm struggling to troubleshoot my code. Essentially, I need to retrieve data from an API and display it on my HTML page. The data type is "jsonp" due to CORS errors that required this workaround for de ...
I am currently running an Express server. My process involves uploading an Excel File from HTML, which is then parsed by Express to perform calculations. Each row in the Excel file contains information about a User's address. For each address, our Expre ...
I keep encountering an error - TypeError: fetch failed after waiting for 300 seconds while requesting an optimization server that requires a response time longer than 300 seconds. The request is being sent from the provided API in NextJS. Is there a way ...
I developed a node application that sends an API request to place a bet on Manifold, a fictional betting website. Using node-fetch successfully triggers the bet, but when relying on the built-in fetch function, it sometimes returns an outdated version of ...
Recently, I attempted to upload images to S3 from my react native app by following a guide provided by Heroku: https://devcenter.heroku.com/articles/s3-upload-node In essence, I utilized the aws-sdk on my express.js backend to generate pre-signed requests ...
Having trouble locating the URL when trying to fetch data for a POST request. I want to mention that my code is written in node.js and express.js. The error message being generated: const form = document.querySelector('form'); form.addEventListener('subm ...
Note: Please note that the API Key used in this code is not a real one for privacy reasons. const url = 'http://newsapi.org/v2/everything?' + 'q=platformer&' + 'apiKey=3ce15c4d1fd3485cbcf17879bab498db'; async function getNews() { ...
While working on rendering a FlatList after fetching JSON data that includes connections, I encountered an issue where the travel object inside the renderItem was always undefined. The code snippet below shows that everything is functioning correctly up ...
I have set up an HTTP server in NodeJS by utilizing the http.createServer(...) method. In my client-side JavaScript file, I sent a query using the POST method to the localhost URL. The server effectively received the data from the client, but now I am enco ...
I'm encountering an issue while attempting to send data from my frontend React application to my Node backend. Every time I make a post request using the fetch() function, I encounter the following error in the Firefox Dev Tools console: TypeError: N ...
Having trouble finding the correct path to map over nested data in my console. I need an Image component for each product in the array. https://i.stack.imgur.com/3nSj1.png Attempting to map over the object shown in the image below. Here is the async functi ...