We Keep Coding

Can't get the proper object back

Hi i'm using MeaningCloud's api to get the proper object back once it analyses a string of text or a url for the Natural language processing (NLP). But it doesn't return the proper object.
Right now the code returns a string with the text "[Object object]" on the HTML page. I need it to return the results of the api call which returns the proper JSON object(that I can see in the console) in a proper "key/value" pair format on the HTML page.
Here's my script:
const baseURL = "https://api.meaningcloud.com/sentiment-2.1";
const key = "Your_api_key";
const submitBtn = document.getElementById("submitBtn");
submitBtn.addEventListener("click", (e) => {
e.preventDefault();
const url = document.getElementById("url").value;
if (url !== "") {
getData(baseURL, url, key)
.then(function (data) {
postData("/add", { data: data });
}).then(function () {
receiveData()
}).catch(function (error) {
console.log(error);
alert("Invalid input");
})
}
})
const getData = async (baseURL, url, key) => {
const res = await fetch(`${baseURL}?key=${key}&txt=${url}`)
try {
const data = await res.json();
return data;
}
catch (error) {
console.log("error", error);
}
}
const postData = async (url = "", data = {}) => {
const response = await fetch(url, {
method: "POST",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
data: data
})
});
try {
const newData = await response.json();
return newData;
} catch (error) {
console.log(error);
}
};
const receiveData = async () => {
const request = await fetch('/all');
try {
// Transform into JSON
const allData = await request.json()
console.log(allData)
// Write updated data to DOM elements
document.getElementById('result').innerHTML = allData;
}
catch (error) {
console.log("error", error);
// appropriately handle the error
}
}
I have another main file that's the server.js file which I run using node server.js that renders the html page properly but the script doesn't render the results on the page properly. You can signup on meaningcloud for a free api key that has a very convenient number of calls you can make.

why post request is not returning the right value

I am trying to get an object and then post its temp. here i get the object by the getweather function and then i made postweather function to post date (variable i made), content (user input) and temp (temp of the object i got by api).
everything is working great but the temp is retrieved as empty object even though i console.log it and is printed as a number.
async function getWeather(url) {
fetch(url)
.then((res) => {
return res.json();
})
.then((data) => {
// console.log(data);
//save temp to globall variable
globalThis.temp = data.main.temp;
})
.catch((error) => console.log("error:", error));
postWeather("/post", temp);
}
//just a fun to check on temp and is printed in numbers
function noha() {
console.log(temp);
}
//post async
async function postWeather(url) {
try {
await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
date: newDate,
temp,
feelings
})
});
} catch (error) {
console.log("error post", error);
}
}

Async function unexpected behavior

At the moment I am working on an Electron app that is supplied with data via an API. The renderer calls a "backend function", which first gets the API key via Keytar and then executes the API call via axios.
The problem here is that Keytar always returns null/undefined, even if a similar function with the same functionality works without any problems, also because this point can only be reached if a valid API key is stored at all and this will also be queried by Keytar.
I am new to async/await-functions, maybe I didn't get something.
btw: Maybe the title doesn't fit too well, but I was a bit at a loss about this one.
(keytarService, username, baseUrl are globals)
Here is my code:
// Api-calling function
async function makeCall(method_type, url_path, data_array) {
keytar.getPassword(keytarService, username).then((apiKey) => {
if (apiKey == null || apiKey == undefined) {
return false;
}
axios({
method: method_type,
url: baseUrl + url_path,
headers: {
'content-type': 'application/json',
'X-AUTH-TOKEN': apiKey,
},
data: data_array,
}).then(
(response) => {
return response.data;
},
(error) => {
return false;
}
);
});
}
//index_renderer.js
webContents.on('dom-ready', () => {
apiMain
.makeCall('GET', 'user/self')
.then((data) => {
console.log(data);
document.getElementById('username_text').innerText =
data.firstName + '' + data.lastName;
})
.catch((err) => console.log(err));
});
Similar function which is working:
async function isAuthenticated() {
apiKey = await keytar.getPassword(keytarService, username);
if (apiKey == null || apiKey == undefined) {
return false;
}
axios({
method: 'GET',
url: baseUrl + '/api/isAuthenticated',
headers: {
'content-type': 'application/json',
'X-AUTH-TOKEN': apiKey,
},
data: {},
}).then(
(response) => {
console.log(response);
if (!response.data.authenticated) {
logout();
}
return response;
},
(error) => {
console.log(error);
logout();
return error;
}
);
}
// call of the working function in main.js
if (authProcess.isAuthenticated()) {
mainwin.loadFile('index.html');
} else {
mainwin.loadFile('login.html');
}
Thanks in advance.

You are missing important returns in MakeCall().
Try:
function makeCall(method_type, url_path, data_array) {
// return this promise to MakeCall
return keytar.getPassword(keytarService, username).then((apiKey) => {
if (apiKey == null || apiKey == undefined) {
return false;
}
// return this promise to keytar.getPassword then()
return axios({
method: method_type,
url: baseUrl + url_path,
headers: {
'content-type': 'application/json',
'X-AUTH-TOKEN': apiKey,
},
data: data_array,
}).then(
(response) => {
return response.data;
},
(error) => {
return false;
}
);
});
}

How to access the request object in a fetch then/response function

I have a JavaScript loop iterating over an array. For every item, I perform a fetch request to insert the object. If the server response indicates it is an already inserted object, I try an update operation with another fetch call.
As the requests are asynchronous, the loop sets the request object to the next insert item before I try the update operation, so I end up requesting an update for an object it's not yet inserted.
Is there any way I can access the request object used for this fetch operation, so I can use that object instead of the loop var?
I've tried with this within the promise method, but it returns a reference to the window object: console.log(this) ==> > Window http://localhost
My code:
for (var i = 0; i < expectedRows; i++) {
var row = myArray[i];
customerCode = row['customer_code'];
customerName = row['customer_name'];
customerBalance = row['customer_balance'];
// Build body call
var callBody = {
user: 'USER',
code: customerCode,
name: customerName,
balance: customerBalance
};
var fetchOptions = {
method: "POST",
cache: "no-cache",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
redirect: "error",
referrer: "ux-import",
body: JSON.stringify(callBody),
};
// Call
var epurl = baseEP + '/customer/create';
fetch(epurl, fetchOptions)
.then(response => response.json())
.then(response => {
console.log(this) // <== Window object reference
if (response.error === 0) {
console.log('insert ok');
insertRows++;
} else {
if (response.error == 2) {
console.log('insert error => update');
var updateEP = baseEP + '/customer/update';
fetch(updateEP, fetchOptions) // <== Not what you expect
.then(updResponse => updResponse.json())
.then(updResponse => {
if (updResponse.error === 0) {
console.log('update ok.')
updateRows++;
} else {
console.log('update error: ' + updResponse.msg)
errorMessages.push(updResponse.msg);
}
})
.catch(error => {
console.log('update failure');
errorMessages.push(error);
});
} else {
console.log('insert error.');
errorMessages.push(response.msg);
}
}
})
.catch(error => {
console.log('insert failure.');
errorMessages.push(error);
});
}
I need some way to access this fetch call request object to achieve something like this:
var updFetchOptions = {
method: "POST",
cache: "no-cache",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
redirect: "error",
referrer: "ux-import",
body: this.request.body, // this as a reference to this fetch's request
}
fetch(updateEP, updFetchOptions)...
:
:

Can you try this.
for (let i = 0; i < expectedRows; i++) {
let row = myArray[i];
customerCode = row['customer_code'];
customerName = row['customer_name'];
customerBalance = row['customer_balance'];
// Build body call
let callBody = {
user: 'USER',
code: customerCode,
name: customerName,
balance: customerBalance
};
let fetchOptions = {
method: "POST",
cache: "no-cache",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
redirect: "error",
referrer: "ux-import",
body: JSON.stringify(callBody),
};
// Call
let epurl = baseEP + '/customer/create';
fetch(epurl, fetchOptions)
.then(response => response.json())
.then(response => {
console.log(this) // <== Window object reference
if (response.error === 0) {
console.log('insert ok');
insertRows++;
} else {
if (response.error == 2) {
console.log('insert error => update');
let updateEP = baseEP + '/customer/update';
fetch(updateEP, fetchOptions) // <== Not what you expect
.then(updResponse => updResponse.json())
.then(updResponse => {
if (updResponse.error === 0) {
console.log('update ok.')
updateRows++;
} else {
console.log('update error: ' + updResponse.msg)
errorMessages.push(updResponse.msg);
}
})
.catch(error => {
console.log('update failure');
errorMessages.push(error);
});
} else {
console.log('insert error.');
errorMessages.push(response.msg);
}
}
})
.catch(error => {
console.log('insert failure.');
errorMessages.push(error);
});
}
Basically, defining variables with var is not a good method as it doesn't maintain its state with each iteration of loop. But using let maintains the variable state for each iteration and you can use the variable even after doing some async task like fetch in your case.

You can achieve this by explicitly creating the RequestInit-Object and wrapping your handler functions like this:
const initObject = {
method: 'POST',
something: 1234
};
fetch('/test.json', initObject)
.then(r => r.json())
.then(((initObject) => {
return json => {
console.log({json, initObject})
}
})(initObject));

Postman / pm api sendRequest command: how to wait till the response is back before populating the variable?

I am trying to create a dictionary object of the response json's using postman's pm api sendRequest.
Wrote a recursive function to get all the responses but the problem is the response dictionary object population happens way before even the response comes back.
Is there any way to wait the dictionary population before each of the respective response is received so as to capture the response within the dictionary object ?
var respDictionary = {};
getResponses (listOfUrls);
console.log("respDictionary: ");
console.log(respDictionary);
function getResponses(urlList) {
if (typeof urlList === 'string') {
urlList = urlList.split(' ');
}
_url = urlList[0];
var call = {
url: _url ,
method: 'GET',
header: {
"Authorization": `Bearer ${token}`,
"Content-Type": "application/json"
}
};
urlList.splice(0, 1);
pm.sendRequest(
call,
function (err, res) {
if (err) {
console.log(err);
} else {
if (urlList.length === 0) {
return;
}
try {
respDictionary[_url] = res.json();
} catch (e) {
console.log(err);
}
getResponses(urlList);
}
});
console.log(respDictionary);
}
Output is:
respDictionary:
Object:{}
//further, pm request responses are listed

You do not understand JavaScript asynchrounous handling. Maybe the following will help:
Event loop video
Promises
Event loop documentation (video is easier)
Your code will work if you use promises:
function getResponses(urlList) {
if (typeof urlList === 'string') {
urlList = urlList.split(' ');
}
return Promise.all(
urlList.map(
function(url){
return {
url: url ,
method: 'GET',
header: {
//not sure where token comes from
"Authorization": `Bearer ${token}`,
"Content-Type": "application/json"
}
};
}
).map(
function(call){
return new Promise(
function(resolve,reject){
pm.sendRequest(
call,
function (err, res) {
if (err) {
reject(err);
} else {
resolve([call.url,res.json()]);
}
});
}
)
.then(
undefined
,function(err){
//if something goes wrong we will still return something
return [call.url,{error:err}];
}
)
}
)
)
.then(
function(results){
return results.reduce(
function(acc,result){
acc[result[0]] = result[1];
}
,{}
);
}
)
}
getResponses (listOfUrls)
.then(//this will always succeed, failed items have {error:something}
function(results){
console.log("results:",results);
}
);
console.log("this comes before results");
The code above will cause all request to happen at once, this may not be the desired behavior, I have written a throttle method that is part of some library functions that may come in handy. You can apply the throttle to your code so it will only have max amount of connections:
const max = 10;//maximum 10 active connections
function getResponses(urlList) {
const throttled = throttle(max);
if (typeof urlList === 'string') {
urlList = urlList.split(' ');
}
return Promise.all(
urlList.map(
function(url){
return {
url: url ,
method: 'GET',
header: {
//not sure where token comes from
"Authorization": `Bearer ${token}`,
"Content-Type": "application/json"
}
};
}
).map(
throttled(//only max amount of connections active at any time
function(call){
return new Promise(
function(resolve,reject){
pm.sendRequest(
call,
function (err, res) {
if (err) {
reject(err);
} else {
resolve([call.url,res.json()]);
}
});
}
)
.then(
undefined
,function(err){
//if something goes wrong we will still return something
return [call.url,{error:err}];
}
)
}
)
)
)
.then(
function(results){
return results.reduce(
function(acc,result){
acc[result[0]] = result[1];
}
,{}
);
}
)
}
getResponses (listOfUrls)
.then(//this will always succeed, failed items have {error:something}
function(results){
console.log("results:",results);
}
);
console.log("this comes before results");

Apart from the other answer(s), following simple approach also works well instead of recursion:
_.forEach (
urls,
function (urls) {
getAPI(url,function (url,schema,err) {
if (!err) {
respDictionary[url]=resp.json();
console.log(schema);
} else {
console.log(err);
}
pm.environment.set('respDictionary', JSON.stringify(respDictionary));
});
}
);
function getAPI(url, callback) {
var _url = '{{BP_SERVER}}/' + urls;
var call = {
url: _url,
method: 'GET',
header: {
"Authorization": `Bearer ${token}`,
"Content-Type": "application/json"
}
};
pm.sendRequest(
call,
function (err, res) {
if (!err) {
callback(urls,res.json());
} else {
callback(urls,'',err);
}
}
);
}