<App>
<ClientPanel>
<JavaScript>
var status = 0;
var response_ok = false;
var requestObject={
"userName": "test",
"password": "test"
}
var Observable = require("FuseJS/Observable");
var statusres=Observable("");
var data=fetch('my api', {
method: 'POST',
headers: { "Content-type": "application/json"},
body: JSON.stringify(requestObject)
}).then(function(response) {
status = response.status;
response_ok = response.ok;
return response.json();
}).then(function(responseObject) {
statusres.value = responseObject.remarks;
console.log("statusres: "+statusres);//responseObject.remarks has string Login success
}).catch(function(err) {
});
var location = Observable("India");
module.exports = {
greeting: statusres,
location:location,
};
</JavaScript>
<StackPanel>
<Text>Status:</Text>
<Text Value="{greeting}" />
<Text>Location:</Text>
<TextBox Value="{location}" />
</StackPanel>
</ClientPanel>
</App>
<App>
<!-- start with JavaScript tag right at the top -->
<JavaScript>
// put require()s at the top of your JS code
var Observable = require("FuseJS/Observable");
// then declare your variables and assign their initial values
var requestObject = {
"userName": "test",
"password": "test"
};
var statusres = Observable("");
var location = Observable("India");
// immediately when the app launches, call fetch()
// and no, you do not assign it to any variable. it's a Promise that you react on with the chained .then()s
fetch(
'my api',
{
method: 'POST',
headers: { "Content-type": "application/json"},
body: JSON.stringify(requestObject)
}
).then(function(response) {
return response.json();
}).then(function(responseObject) {
statusres.value = responseObject.remarks;
console.log("statusres: "+statusres.value);//responseObject.remarks has string Login success
}).catch(function(err) {
console.log("There was an error executing fetch()");
});
// then have your module.exports, which basically exposes your JS variables for use in UX below
module.exports = {
'greeting': statusres,
'location': location,
};
</JavaScript>
<!-- have your UX part after your JavaScript -->
<ClientPanel>
<StackPanel>
<Text>Status:</Text>
<Text Value="{greeting}" />
<Text>Location:</Text>
<TextBox Value="{location}" />
</StackPanel>
</ClientPanel>
</App>
@Uldis
Thanks. It’s working fine. Thanks for the good explanation done with comments.