data returned from web service binds after clicking on textbox

<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.