Hey there everyone, I was wondering how to send both single and multiple values to a database using JavaScript and JSON endpoints with a Spring Web API

Question

Hey there everyone, I was wondering how to send both single and multiple values to a database using JavaScript and JSON endpoints with a Spring Web API

{
        "id": 178,
        "stockin_date": "2022-11-15T08:18:54.252+00:00",
        "effective_date": null,
        "expired_date": null,
        "create_date": null,
        "update_date": null,
        "createby_emId": null,
        "updateby_emId": null,
        "deleteby_name": null,
        "delete_date": null,
        "invoice": "P_008",
        "po": "YSYDV",
        "remark": "Buy from PIC",
        "supply_id": 2,
        "stockinDetail": [
            {
                "id": 272,
                "quantity": 10,
                "unit": "kg",
                "unit_price": 9,
                "stockin_id": 178,
                "pro_id": 74
            },
            {
                "id": 273,
                "quantity": 14,
                "unit": "kg",
                "unit_price": 2,
                "stockin_id": 178,
                "pro_id": 75
            }
        ]
    }

How Can I Develop a JavaScript function to send this data to an API endpoint like Postman?

Hello everyone, does anyone know how to use JavaScript to submit both single and multiple values to a database using JSON?

javascript json ajax spring api

Answer 1

Answer №1

If you want to make a POST request using fetch in JavaScript, you can follow this example with different data and a different url.

To customize the code for your specific needs:

Update

const data = { "name": "test", ... };

to

const data = { "id": 178, ... };

Modify

const url = 'https://dummy.restapiexample.com/api/v1/create';

to

const url = 'http://localhost:8082/stockin/add';

const data = {
  "name": "test",
  "salary": "123",
  "age": "23"
};
const url = 'https://dummy.restapiexample.com/api/v1/create';

//send the POST request and handle the response
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then((response) => response.json())
  .then((data) => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

Answer 2

If you want to make a POST request using fetch in JavaScript, you can follow this example with different data and a different url.

To customize the code for your specific needs:

Update

const data = { "name": "test", ... };

to

const data = { "id": 178, ... };

Modify

const url = 'https://dummy.restapiexample.com/api/v1/create';

to

const url = 'http://localhost:8082/stockin/add';

const data = {
  "name": "test",
  "salary": "123",
  "age": "23"
};
const url = 'https://dummy.restapiexample.com/api/v1/create';

//send the POST request and handle the response
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then((response) => response.json())
  .then((data) => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

Hey there everyone, I was wondering how to send both single and multiple values to a database using JavaScript and JSON endpoints with a Spring Web API

Answer №1

Similar questions

Access JSON data from PHP server and display it in a listview on an Android platform

Leverage JavaScript to add the rel=0 attribute to a specific URL

Create messages similar to StackOverflow's "toast" notifications

What is the best method for removing node and then reinstalling it using nvm?

Using Django to showcase model data using primary key

JavaScript facing issue with $.get command executing in incorrect order

The list countdown for loop only appears in the initial iteration

Change the date string to year, month, and day

What causes my useEffect hook to trigger twice in React?

Error encountered when attempting to perform a Fetch POST request with same-origin credentials (Express & React)

Utilizing an Office App Ajax that includes an authentication header, the application connects to a secure Web API 2 backend with CORS

extracting data from JSON string using PHP

Is there a way to minimize the use of .value in Vue 3?

The object you are attempting to use does not have the capability to support the property or method called 'after'

The Step function within AWS Lambda returns the error code "Runtime.HandlerNotFound"

Challenges faced when parsing JSON in Lua

Increasing the Efficiency of Styled Components

Transforming a JSON data string into a DataTable using Newtonsoft.Json in VB

Creating a new object through manipulation of existing objects

The issue with executing event.keyCode == 13 in Firefox remains unresolved