We Keep Coding

POST function on server returns undefined

i have a frontend where I define a string in this case videoLink.
Besides that I have an async function that starts when a button is clicked.
//sveltekit
async function addToQueue(){
console.log(videoLink);
const res = await fetch('/tool/server', {
method: 'POST',
body: {
videoData: videoLink
}
})
const json = await res.json()
console.log(json);
videoLink = "";
}
This function sends an http-post request with fetch to my server.js file.
/** #type {import('#sveltejs/kit').RequestHandler} */
export async function POST(event) {
const data = await event.request.body;
const link = data.videoData;
console.log(link)
}
when i run the post-request (by clicking the Button in my frontend), my server logs undefined. As far as I know the server gets the POST request, because it logs only if I click the button.
But why does it return undefined? I have tried to parse the json, but it didn't work. Can anyone help me? What is wrong with my JSON?

Open the developer tools in your browser. Look at the Network tab. Examine the Request payload you are sending:
[object Object]
fetch doesn't support plain objects for the body option. It will convert them to strings with their toString() method.
You need to either provide:
an object which fetch does support. The common options are
URLSearchParams for application/x-www-form-urlencoded data
FormData for multipart/form-data
an encoded string (such as the output of JSON.stringify) and also set the content-type HTTP request header to match
Which you choose will depend on what encodings the server side code supports.

So I have provided
headers: {
'Content-Type': 'application/json'
}
to fetch the data.
On the server side I've done the following:
export async function POST({request}) {
const data = await request.json()
console.log(data)
return {}
}
Now the function returns {}, which isn't mandatory. The reason it works now is that POST gets {request} as an argument.
Notice the curly braces. Thanks a lot to #Quentin for his help.

Passing JSON array to cloud function node js

I am trying to convert a javascript object array to JSON to pass it with the POST request to the cloud function. However when I use the JSON.parse() function I get an error:SyntaxError: Unexpected token u in JSON at position 0
Can someone tell me what I'm doing wrong, this is my POST request:
const body = `{
"item":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}]
}`;
const init = {
method: 'POST',
body
};
fetch('https://us-central1-web-app-bbo-prod.cloudfunctions.net/TestObject', init)
.then((response) => {
return response.json(); // or .text() or .blob() ...
})
.then((text) => {
// text is the response body
})
.catch((e) => {
// error in e.message
});
and this my cloud function:
exports.TestObject = functions.https.onRequest(async(request, response)=> {
var corsFn = cors();
corsFn(request, response, async function() {
const myJSON = request.body.item;
console.log(JSON.parse(myJSON))
//console.log(item)
})})

TLDR:
Server: remove JSON.parse
Client: change init to
const init = {
method:'POST',
body:JSON.stringify(body),
headers: {
'Content-Type':'application/json'
}
}
Explained:
You've got three issues I see.
Anytime you see the following you are calling JSON.parse on invalid stringified JSON.
SyntaxError: Unexpected token u in JSON at position 0
First, req.body should already be JSON if everything's working properly and you received JSON. To call JSON.parse(req.body.item) is to pass an Object to a function that takes strings. You can just refer to req.body.item.
Second you have to make sure you're sending the correct body, you are passing an object as the body for the fetch function. I'm not familiar with the fetch function but a quick look at the Mozilla examples indicate that should it should be stringified, i.e. body:JSON.stringify(body). The object you pass likely is either converted to form data or has toString() called on it and you're sending [object Object].
// REPL
> ({foo:'bar'}).toString()
'[object Object]'
Third, you have to make sure it gets parsed properly on the backend.
According to the GCloud nodeJS docs the nodejs google cloud functions implement an endpoint for an Express Router.
Normally if you wanted to use JSON the way you are you would need the body parser BodyParser middleware. The examples here (GCloud HTTP Functions) indicate that the body-parser middleware is already instead and working based off of Content-Type header.
Since it's deciding whether to parse it as JSON based on content type you want to set the header in your fetch function as 'content-type':'application/json'.

JavaScript: Date object convert to string when sent to backend

Summary of Problem
I have a React Native application where I create a date object, assign it to startTime and send it via Axios to my backend end node.js server. When I typeof console.log the variable immediately after receiving it in the backend, the type is a string. I have done typeof console.logs in the front end to make sure it is a date object all the way up until it is sent via Axios to the backend.
This may be a axios or HTTPS thing I'm not familiar with as I'm a new developer. Any help would be greatly appreciate it. I've included all relevant code below but let me know if you think I should include more.
Code
React Native API Call
startTime console logs as an object
export const confirmDailyComp = async data =>
new Promise(async (resolve, reject) => {
const { userId, compName, startTime, competitors, lengthType, privacyType } = data; //FIXME: add competition back here, took it out to throw error on purpose
console.log('confirmDailyComp typeof startTime', typeof startTime) //this console logs as an object
try {
const response = await http.post("/v1/route", {
userId,
compName,
startTime,
competitors,
lengthType,
privacyType
});
const competition = response.data.newComp;
resolve(competition);
} catch (err) {
console.log("error fetching friends", err);
reject(err);
}
});
Node.js Controller
startTime console logs as a string
There is of course more code in the rest of the route but I didn't include it to be concise. I'm happy to include it if you think its necessary.
start: async function(req, res, next) {
try {
const {
competitors,
startTime,
userId,
compName,
privacyType,
lengthType,
seasonNum
} = req.body;
console.log("typeof startDate", typeof startTime); // console logs as a string
} catch(err) {
}

JavaScript Date is an object, and JSON specification doesn't have date.
This is why when you send it through JSON it will be serialized as string, because Axios by default will serialize it as UTC format string.
You have three options:
understand they are UTC string and you create a date object which can parse them correctly.
convert the date yourself to its numeric format.
The third option is the JSON.parse method has an optional parameter to pass your custom parser, which you can use it to build a custom date parser.
You can get an idea from this:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter

Try considering sending startTime as a timestamp(something like 1567114948292).
Now you can take this value in the server and get the time.

Extract Base64 string from an object

I am sending a base64 string to my node.js server. But its adding the string inside object brackets {}
Front-end code:
I encode the base64 string to preserve it.
let options = {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};
let encodedImage = encodeURIComponent(body);
return this._http.put<IUser>(`${BASE_URL}/api/users/${id}/photo`, encodedImage, options)
.map(data => {
return data;
})
.catch(err => {
// do whatever you want when error occurs
console.log(err);
// re-throw error so you can catch it when subscribing, fallback to generic error code
return Observable.throw(err || 'API_ERROR');
});
}
Serverside:
let upload = (req, res) => {
let b64string = req.body;
console.log(b64string);
}
The console log is:
{ 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA.....+idkVe3H/9k=': '' }
How can I extract the base64 string from within the object so I can access it. it seems like a simple thing but my brain has given up. Any help will be greatly appreciated.
Update:
Update 2:
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

There seems to be something putting your string in an JSON encoded value, hence the {'...' : '...'}.
You could put the base64 encoded string in an json object from the get go, that way you have an expected input when you get the object. You just need to get the string from the json key.
Hope this helps.

The problem here is that you creating a PUT request with
Content-Type : application/x-www-form-urlencoded but you pass a single string as your data. So the body-parser sees this string as a key with an empty value and that's why you get this console log.
So the solution to this,
let options = {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};
let requestBody = new URLSearchParams()
requestBody.append('encodedImage',body)
return this._http.put < IUser > (`${BASE_URL}/api/users/${id}/photo`, requestBody, options)
So we said we have a content type of form-urlencoded (that means all of your data will be passed as giant url query) and we passed a urlencoded form (through the URLSearchParams)
Please bear in mind URLSearchParams browser compatibility.
Please consider using multipart/form-data for your file uploads instead, if you don't have any limitations. The logic of the above will be the same except the new URLSearchParams() will be new FormData().

How to get JSON array on client_JS from server_JS?

From nodeJS (with Express) I try to send JSON_array in response to client JS:
asksJsonArray = JSON.parse(fs.readFileSync("tasks.json", 'utf-8'));
app.get('/getArr', function (req, res) {
readJsonContent();
res.json(JSON.stringify(TasksJsonArray)); //sending JSON array to client_JS in response
});
On client-side I want to get it, but nothing receive:
$.get('/getArr').success(function(res) {
var currencyData = JSON.parse(res);
if (!currencyData.rates) {
// possibly handle error condition with unrecognized JSON response
alert("currency data not found!");
} else {
taskArr = currencyData;
}
})
So I always receive msg 'currency data not found!' ...

res.json already converts the data to JSON, so you don't have to do it manually:
res.json(TasksJsonArray);
I believe this will also set the appropriate headers, so on the client, you don't have to explicitly parse the JSON, jQuery will do it for you:
$.get('/getArr').done(function(currencyData){
if (!currencyData.rates) {
// possibly handle error condition with unrecognized JSON response
alert("currency data not found!");
} else {
taskArr = currencyData;
}
});
Please note that assigning the response to a free variable is not really useful since you won't know when it's "safe" to access the variable. You might want to have a look at How do I return the response from an asynchronous call? .
This may still not work since currencyData might be a value that does not have a rates property. To learn how to correctly access the data, have a look at Access / process (nested) objects, arrays or JSON.

Alter res.json(JSON.stringify(TasksJsonArray)); to res.send(JSON.stringify(TasksJsonArray));.