im new on Angular and have a question.
I need to call 2 API Rest, on second API i need result of first API.
I have this code:
ngOnInit() {
this.Jarwis.getmyinfo()
.subscribe(
// data => console.log(data),
data => this.Getmyinfo = data,
error => console.log(error),
);
this.Jarwis.showazienda(id_azienda).subscribe(
// data => console.log(data),
data => this.Showazienda = data,
error => console.log(error),
);
}
This is a call to API rest in Jarwis:
getmyinfo(): Observable {
return this.http.get(${this.baseUrl}/me);
}
showazienda(data): Observable {
return this.http.get(${this.baseUrl}/showazienda/ + data);
}
getmyinfo is first HTTP REQUEST and where i need to get id_azienda for second HTTP REQUEST (showazienda)
I think need map result of first http request in json and get result of id_azienda but im not able to do it.
If i set 1 in the parameters of showazienda im able to get and show info of API.
For observables, you use the ".flatMap" to chain multiple async actions together (this is very similar to the promises ".then"). The flatMap allows you to used to chain multiple async requests together and have them execute one by one in order.
Here is a good explanation of flatMap.
So for your example, you would do something like this:
ngOnInit() {
this.Jarwis.getmyinfo()
.flatMap(
(data) => {
this.Getmyinfo = data;
// get id_azienda from data
return this.Jarwis.showazienda(id_azienda);
}
).subscribe(
// data => console.log(data),
data => this.Showazienda = data,
error => console.log(error),
);
}
This example code will first send the "getmyinfo()" request. Once the response is received the ".flatMap" will be called with the data received from "getmyinfo()". You can then used this data to get the "id_azienda". Then you can make the second request to "showazienda". The observable returned from "showazienda()" needs to be returned in the flatMap. Then you subscribe to the modified observable and the data you receive will be the result from the "showazienda()" request.
Related
I created a filter to log some important data from the request and response...
#Override
public Mono<ClientResponse> filter(ClientRequest request, ExchangeFunction next) {
URI uri = request.url();
HttpMethod method = request.method();
return next.exchange(request).onErrorResume(err -> {
writeToFile(method, uri, 500, "", true);
return Mono.error(err);
}).flatMap((response) -> {
return response.bodyToMono(String.class).flatMap(body -> {
writeToFile(method, uri, response.rawStatusCode(), body, false);
return Mono.just(response);
});
});
}
The idea of this filter is to register some data and let the rest work exactly the same.
Expected: This was my attempt to keep the rest of the code untouched and just include a filter to store some data apart from the normal flow.
Actual: It works, except when the real code calls bodyToMono, it returns null
At some point of the normal flow, I am doing something similar to this:
return client.get().uri(...).exchangeToMono((response) -> {
return response.bodyToMono(MyObject.class);
})
It works flawlessly when I remove the filter.
So I discovered I can't call bodyToMono twice the way I am using probably because the first call is consuming the body and then it is empty in the second call.
I had a Array with N number of objects. I want to make a service call sequentially. One response comes based on that i will make a another request. Please provide a better approach to handle this scenario through JOINS in Angular 5.
You can use switchMap for this.
nestedCalls(user: any) {
return this.http.get('YOUR_URL').pipe(
switchMap(data => {
const body = {
// do your work woth data - first service object
};
return this.http.post('YOUR_URL', body);
})
)
}
Or you can do something like below also :
this.service.getData(id, (response) => {
this.service.getInitiatedEntity(response.id).subscribe(
(retData) => {
// response - 1st service data
// retData - 2nd service data
}
);
});
Hope this help.
I can't change the variable qty in my computed properties.
getQuantity(){
return (qtyId) => {
var qty = 0;
axios.get( window.location.origin + '/api/quantity/' + qtyId)
.then(res => {
console.log(res.data.qty)
qty = res.data.qty
})
.catch()
console.log(qty)
return qty
}
},
It is an asynchronous request using axios. the console.log(res.data.qty) works fine it output 4 but the console.log(qty) is 0. I think it's because of asynchronous request... How can I make it work... TY
I think it's because of asynchronous request
It definitely is.
If you're not familiar with writing asynchronous code, I would read up on that first (in particular promises).
console.log(qty) returns 0 because that code is executed immediately after the request is sent and before the response has come back from the server. The callback function you passed to then is the function that will be executed once the response has come back from the server, and only then will you be able to obtain qty from the response data.
If you want to return qty from that function (which is what it looks like you are trying to do), then that function must return a promise that once resolved will contain the qty value (code isn't blocked in JavaScript, hence the reason for the promise).
getQuantity() {
return (qtyId) => {
return axios.get(window.location.origin + '/api/quantity/' + qtyId)
.then(res => {
return res.data.qty;
});
}
},
Why is it a computed property instead of a method? I think a different approach would be better, but I don't know exactly how this code fits into your project.
I want to use Fetch API but i don' t really understand it's mecanism.
I have an in my HTML and i want to assign the result of my fetch with this code :
const weather = "http://api.apixu.com/v1/current.json?key=cba287f271e44f88a60143926172803&q=Paris";
const array = [];
fetch(weather)
.then(blob => blob.json())
.then(data => {
array.push(data.current.humidity)
console.log(array[0])
}
);
document.querySelector('h1').innerHTML = array[0];
i have the result with the console.log but the returns "undefined". can you explain why ?
thanks a lot
This is because the call to the API is asynchronous, meaning that the code is not executed just line by line as you write it. The callback only runs as soon as the call to the API has finished, basically meaning that
data => {
array.push(data.current.humidity)
console.log(array[0])
}
runs after
document.querySelector('h1').innerHTML = array[0];
So when you try to set your h1, array is still empty. If you want to set it as soon the data is available, you have to do it within the callback function:
data => {
array.push(data.current.humidity)
document.querySelector('h1').innerHTML = array[0];
}
This might seem weird at first, but keep in mind that you're only registering an anonymous function but not running it yet. You just define the function that you want to trigger as soon as something happens, in this case: when your API call has finished.
I'm trying to get different chunks of data from a trello API using bluebird promises library. In my express router I'm using middleware isLoggedIn, and getBoards, which body looks something like:
trello.get("/1/members/me/boards") // resolves with array of board objects
.each((board) => {
// do some async stuff like saving board to db or other api calls, based on retrieved board
.catch(err => console.error('ERR: fetching boards error - ${err.message}'))
})
The question is: I want to redirect (res.redirect('/')) only when all boards were retrieved and saved. How can I do that? Where should I place xres.redirect('/') expression?
I think you need something like:
var Promise = require('bluebird');
var promises = [];
trello.get("/1/members/me/boards") // resolves with array of board objects
.each((board) => {
//
promises.push( /*some promisified async call that return a promise, saving data in db or whatever asynchronous action. The important bit is that this operation must return a Promise. */ );
});
//So now we have an array of promises. The async calls are getting done, but it will take time, so we work with the promises:
Promise.all(promises).catch(console.log).then( function(results){
/*This will fire only when all the promises are fullfiled. results is an array with the result of every async call to trello. */
res.redirect('/'); //now we are safe to redirect, all data is saved
} );
EDIT:
Actually, you can avoid some boilerplate code using map instead of each:
trello.get("/1/members/me/boards") // resolves with array of board objects
.map((board) => {
return somePromisifiedSaveToDbFunction(board);
}).all(promises).catch(console.log).then( function(results){
res.redirect('/');
} );