What is the process for adding parameters to a Fetch GET request?

I have developed a basic Flask jsonify function that returns a JSON Object, although I am not certain if it qualifies as an API.

@app.route('/searchData/<int:id>',methods=["GET"])
def searchData(id):
    return jsonify(searchData(id))

Currently, when using the Fetch function, I am unable to pass the argument <int:id>. I am unsure if it is possible to add parameters to the Header in Flask to accept this argument.

async fetch(id){      
    const res = await fetch(
      "http://localhost:5000/searchData/",
        {
          method:"GET"
        }
    );
    const data = await res.json()
    console.log(data)
  }

Answer №1

Convert the double quotes to back ticks in order to turn it into a string literal and then incorporate interpolation.

async fetchData(identifier){      
    const response = await fetch(
      `http://localhost:5000/retrieveData/${identifier}`,
        {
          method: "GET"
        }
    );
    const information = await response.json()
    console.log(information)
  }

This approach to interpolation greatly enhances readability, especially with multiple parameters.

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

Error: Unable to locate module '@emotion/react' in 'E:frontend ode_modules@muistyled-engine' directory

I've been trying to import a box component from @mui/material/Box. After installing Material-UI 5 using npm i @mui/material, I encountered the error message Module not found: Can't resolve '@emotion/react' in 'E:\frontend&bsol ...

What is the best way to transfer variables from an ng-template defined in the parent component to a child component or directive?

Is there a way to pass an ng-template and generate all its content to include variables used in interpolation? As I am still new to Angular, besides removing the HTML element, do I need to worry about removing anything else? At the end of this ...

Serve the JS files in Express separately

I am facing issues with my webapp loading too slowly when using the express.static middleware to serve all my js files. I am considering serving each js file only when needed, such as when serving the html from jade that uses the js file. I have attempted ...

Roundabout Navigation Styles with CSS and jQuery

My goal is to implement a corner circle menu, similar to the one shown in the image below: https://i.stack.imgur.com/zma5U.png This is what I have accomplished so far: $(".menu").click(function(){ $(".menu-items").fadeToggle(); }); html,body{ colo ...

Send out data every 250 milliseconds in a way that resembles debounceTime(), but without any waiting period

When the window is resized, I have a complex operation that rearranges multiple DOM elements. To prevent frequent updates, I implemented debounceTime(250ms) to introduce a delay before refreshing the components. However, this approach can cause issues if ...

Error: Koa.js framework is unable to find the "users" relation in the Sequelize database

I am currently facing an issue while attempting to establish a relationship between two tables, 'user' and 'accessToken'. The error message I am encountering is hindering the process. Below are the models in question:- User model:- ...

AngularJS ng-repeat - cascading dropdown not refreshing

I'm dealing with an AngularJS issue where I'm trying to create a cascade dropdown like the one below: <div class="col-sm-2 pr10"> <select class="PropertyType" ng-controller="LOV" ng-init="InitLov(140)" ng-model=" ...

Interacting with a C# Web Service Using JQuery

I've set up a JSON web service in C# and I'm working on creating a custom HTML page to interact with it. http://localhost:25524/DBService.svc/json/db=TestDB/query=none When I input this URL into my browser, I expect to receive JSON formatted da ...

A guide on retrieving query string parameters from a URL

Ways to retrieve query string parameters from a URL Example Input - www.digital.com/?element=fire&solution=water Example Output - element = fire solution = water ...

What is the process for retrieving the component along with the data?

As I work on compiling a list of div elements that require content from my firebase cloud storage, I find myself unsure about how to effectively run the code that retrieves data from firebase and returns it in the form of MyNotes. Consider the following: ...

Attempting to populate HTML content retrieved from my MySQL database

Currently, I am attempting to retrieve HTML content stored in my MySQL database using nodejs. The products are being retrieved from the database successfully. export async function getAllProducts() { try { const response = await fetch('ht ...

React failing to display basic component

As a newcomer to React, I have a question regarding rendering a basic React component. Here is my setup in index.html: <!DOCTYPE html> <html lang="en> <head> <title>React</title> </head> <body> < ...

Find the string "s" within a div element aligned vertically, using Popper

Currently utilizing Popper from Material-UI <Popper id={"simplePopper"} open={true} style={{backgroundColor: 'red',opacity:'0.5',width:'100%',height:'100%'}}> <div style={{height:"100%", ...

Is it possible to activate a click event on a v-select component?

I am currently using vue-select and I would like to create a click event when an item is selected from the select list. I attempted to use @change="changedValue" @selected="changedLabel" but it did not work as expected. Vue Select <v-select placeholde ...

Accessing User Input Data with JQuery

Can someone help me figure out how to store the input value from a Materialize select form in HTML using a variable in javascript/jquery? Here is the HTML code for the form: <div class="input-field col s12"> <select> <option va ...

How to retrieve items from a DynamoDB table where the fields array is not empty using JavaScript FilterExpression

Can anyone help me with filtering this sample dynamodb table to only return items where either the "old" or "new" array is not empty? In the example below, it should retrieve the items with id "2" and "3". Table: field name = item [ { id: "1", p ...

Toggling classes with Vue.js within a v-for loop

Currently, I am in the process of creating a list of items using a v-for loop. The data I am using comes from an API provided by the server. items: [ { foo: 'something', number: 1 }, { foo: 'anything', ...

A guide on using jQuery-Tabledit and Laravel to efficiently update table rows

In Laravel, it is necessary to include the row ID in the request URL to update it, for example: http://localhost/contacts/16 The challenge arises when using jQuery-Tabledit, which requires a fixed URL during initialization on page load. Hence, the query ...

Guide on sending JSON object to Angular custom components

I have implemented a custom element in Angular 7 using the CUSTOM_ELEMENTS_SCHEMA. My app.module.ts code is as follows: export class AppModule { constructor(private injector: Injector) {} ngDoBootstrap() { this.registerCustomElements( ...

unable to employ angular ui-sortable

I got the most recent source code from https://github.com/angular-ui/ui-sortable. However, I am facing issues in using it. The demo.html file seems to be broken. Update: Upon inspecting the console when opening demo.html: Navigated to https://www.google. ...