I am calling REST API through service and using that service to get response in root component. So now I have api response(JSON object) in my root component and I want share that object in child component. How can I use that object in child component without calling service again?
In short, I don't want to call sever many times for same data (call api only once) and use that response throughout angular 2 application.
Could you please suggest how we can achieve this?
You can do this by using get and set. Create a public variable with get and set.
Fisrt time when you get response simply set into that variable and after that call get method to retrieve same data.
public listData;
set listData(value){
this.listData = value;
}
get listData(){
return this.listData;
}
Related
I have an API method that I need to call in my UI, and unsure the best way to do so. Can anyone point me in the right direction? Using restangular and angularJS. Should I create a service and then call the API Inside of it, and then reference that in my controller? Please let me know, thanks.
Maintain service layer, dao layer, view layer separately is the best practice.
You may look the Design Pattern.
The way I am doing is like this.
1 .First make an shared service first (shared.service.ts).
Create a method inside the service,there you call the rest api
getData():Observable<any>{
return this.http.get(localhost:8000/api/data);
}
or
getData(){
return this.http.get(localhost:8000/api/data);
}
Inject the service into the component where you want to use
constructor (private sharedService:SharedService){}
Subscribe to the method that is defined in the service to the function where you want to call the api
this.sharedService.getData().subscribe(response => {});
I created a publication(on server) and subscription (on client) in MEteor + React application. My problem is, I can't receive the array returned by the publication. I used console.log in publication and it logs the subscription key and option. I check also documents before returning and it is correct. But in client, still cant get array of documents.
Here is my code for componentDidMount,
Meteor.subscribe("messages",{},{},function(err){
console.log("err",err);
console.log(Messages.find().fetch());
});
console.log here are not called.
Here is my code for publication,
if (Meteor.isServer) {
Meteor.publish('messages', function (key,option) {
console.log(key);
return Messages.find(key,option);
});
}
console.log here is working and also i checked the documents before returning and it is correct.
I used also react-router in my application.I add route for my parent component. The problem i have is in child component.
What is wrong with my code? or how to solve this problem?
I used msavin:mongol and still having 0 for the count of documents.
I think Meteor Chef is promoting a nice folder structure. If you happen to use that, just to make sure your server side actions reach the server, meaning they are imported to the server. Just sharing a screen from one of my projects:
register-api.js is further down imported in main.js in my server folder.
Secondly, what if you do your console.log(Messages.find().fetch()) outside the subscription. You put it into the callback function and should not really be there. What you normally do is to pass the result of Messages.find().fetch() to props in the component's container, so the result needs to be captured outside of your subscription.
Let's say my app is a list of many items. There's a lot of items so I don't want to include all the items in the redux state.
When a user visits me at myapp.com/item/:itemId, I want to display the selected item. Currently I make an api call in componentDidMount to fetch the item and store the response in myReduxState.selectedItem. However, this shows the user and unfinished page until the api call finishes.
Is there any way I can get around this?
The pattern I tend to follow is to have a state of fetching being tracked in the redux state. Once the api resolves you just make sure the state is set correctly and then in your render methods use that to determine what you are rendering.
render() {
if (this.state.fetching) {
return <div> // put whatever you want here, maybe a loading component?</div>
}
return (
// put the regular content you would put for when the api call finishes and have the data you need
)
}
I solved this problem by making the creating the state on the server side. I get the itemId from the url in my express route and get the details of the specific item. I use this to create the state and pass it to the front-end.
I am making a AJAX call using something like:
model.fetch(
dataType: "jsonp",
success: function(data){}
)
My question is if I want to modify the data return from the server, should I do it in success or model.parse(). Also, which method gets executed first?
WARNING: I am a backbone newbie :)
Thank you in advance!
Parse will be triggered first.
The backbone official documentation its not clear about it. It says:
parse is called whenever a model's data is returned by the server, in fetch, and save. The function is passed the raw response object, and should return the attributes hash to be set on the model. The default implementation is a no-op, simply passing through the JSON response. Override this if you need to work with a preexisting API, or better namespace your responses.
It doesn't talk about who is triggered first.
But i test it by my self, and parse was triggered first.
You can test it by yourself, if you don't have an API for test, Use dataType:"jsonp" and try to find a web site that is using REST.You'll see that JsonP is triggered first. :)
I am new to angular and I am building an app where I want to make multiple API calls and update the view as the data from them comes by. I do not want to wait for all the api calls to be completed to update my view and my api calls are not dependent on each other. Some of the API calls takes more than a minute to return the data.
I was thinking of using $q.all since I can start multiple asynchronous tasks, but I can't update the view after each one is completed. Could someone please point out how I can build this ?
Should I just use $scope.$apply in the success block of my $http call ?
My progress so far LINK (this was different issue I had, but the code is the same)
It's a bit hard to understand your model and what you're trying to achieve from you question, but you might want to use something like $broadcast() and $on().
So you'd broadcast an event when you're API has finished downloading:
$scope.$broadcast('API-download', data);
and then listen for it elsewhere and update your view
$scope.$on(
'API-download',
function(data){
processData( data );
}
)
That syntax might not be perfect, and as you have multiple API calls you'll need to broadcast different events like 'API-product-download' and 'API-catalogue-download'