I have angular2 app (TypeScript), which uses RxJS to process json-request (I know about angular's services, I have just simplified code).
This code is in class method:
this.http.post(url, body, options)
.map(
response => response.json()
)
.subscribe(result => {
persons => this.persons = persons
});
In class I have field persons and I want that this field should get data from response in order to use this persons in *ngFor
Also I have java-backend, which produces such response (I have got this output after adding console.log() in map()):
message:"[{"personId":"29d5a903-b664-4fc3-9bd9-0836f1b3dc58","email":"test#example.com","firstname":"Test","lastname":"Testoff","username":"oooo","birthdate":"2000-05-28","gender":"male","password":"xxxxx","active":null,"profiles":[]}]"
What am I doing wrong ? (I'm backender, sorry, for silly questions, may be)
I saw that you fixed the code and it is working. I'd like to outline a different solution which is more aligned with angular2's philosophy, do not hold a local variable in your app, use directly the service's sequence:
<my-person
*ngFor="let person; of peopleService.people | async;"
[name]="person.name"
(hello)="saidHello($event)">
</my-person>
Related
i'm making an angular application and i have an empty array
addresses : any [] = [];
then after a click event i start an http observable to charge the data from a server
and then i make a pipe map to take what i want and then i make a subscribe
const URL ='some url';
onSearch() {
this.httpClient
.get(`URL${{some data to generate the http observable}}`)
.pipe(
map(response => response.address),
tap( => console.log("address array", address)) // address array [Object, Object, Object]
)
.subscribe(address => this.addresses = address);
}
in the html template i have this
<button (click)="onSearch()"> search address </button>
<ul *ngFor="let address of addresses">
<li>{{address.one}} - {{address.two}} - {{address.three}}</li>
</ul>
the firs time i clcik the button is ok i see the result , but the second time i click the button
the first result is deleted from the second.
My problem is how can i store multiple result in an array and how can i see thei in the html temlate?
Leveraging angular's change detection
You can try this.
.subscribe(addressArray =>
addressArray.foreach(
address => this.addresses.push(address)
)
);
or this:
.subscribe(addressArray => {
for (const address of addressArray){
address => this.addresses.push(address);
}
});
These two approaches do not work well with angular change detection since they're are mutating an existing array rather than creating a new array.
These approaches both create new arrays and angular change detection will have an easy time spotting.
this:
.subscribe(addressArray =>
this.addresses = this.addresses.concat(addressArray)
);
or this:
.subscribe(addressArray =>
this.addresses = [...this.addresses, ...addressArray]
);
They're all very similar ways of achieving the same thing.
Leveraging Angular's async Pipe
Here's a very different way: Output your result array directly in your stream!
Instead of an array like this:
addresses: any[] = [];
You have an Observable and a Subject like this:
newAddresses = new Subject<any[]>();
addresses = newAddresses.pipe(
scan((acc, val) => ([...acc,...val]), [])
)
Then your search emits results directly to your subject.
const URL ='some url';
onSearch() {
this.httpClient
.get(`URL${{some data to generate the http observable}}`)
.subscribe(response => this.newAddresses.next(response.address));
}
Now in your HTML, you can subscribe to this array using angular's async pipe
<button (click)="onSearch()"> search address </button>
<ul *ngFor="let address of addresses | async">
<li>{{address.one}} - {{address.two}} - {{address.three}}</li>
</ul>
This is a reasonable amount of extra work. So why bother?
Flexibility: Now any number of methods can update your addresses, and they'll all get managed by scan in a uniform way.
Maintainability: If you want to change or format addresses in the future, there's a simple & singular place to do it.
Extenability: You can add in fancy RxJS operators like debounce to control how results appear on the screen. It's a really nice way to stop display-stuttering when events get queued up.
Performance: If your application relies on pushing data rather than binding it, you can turn off angular's change detection entirely and boost the performance of your app :).
Even if you're not going to turn off change detection, you can mutate a massive array in memory and not worry about whether change detection will pick it up or need to explicitly tell change detection to check the contents of your array for changes.
You can try this.
.subscribe(address => this.addresses = [...address, ...this.addresses]);
I've been trying for hours to make it work and I can't do it, I hope some of you have the answer to my question because it must be very simple and I am a beginner
I am using AngularJs and NestJs in Nest used the #nestjsx/crud and I went trow the request docs so, here is the problem:
This is my Angular service function
getProductsOfPiece(pieceId: number): Observable<ProductSimple[]> {
return this.http.get<ProductSimple[]>(
'api/producto/', {
params: {
fields: "id,refFabr,refCliente,descrCorta,imagen",
filter: 'pieza.id||$eq||'+ pieceId
}
}
);
}
This request gives me a 400 Bad Request, it looks like this:
/api/producto/?fields=id,refFabr,refCliente,descrCorta,imagen&filter=pieza.id%257C%257C$eq%257C%257C1
I imagine the % and the hexadecimal have something to do with the URI coding and tried to encode/decode it, but didn't work.
I also tried using the class RequestQueryBuilder of #nestjsx/crud-request from the FrontEnd usage referenced in the docs, and append it to the URL
let queryString = RequestQueryBuilder.create()
.select(["id","refFabr","refCliente","descrCorta","imagen"])
.setFilter({
field: "coleccion.id",
operator: CondOperator.EQUALS,
value: collectionId
}).query();
return this.http.get<ProductSimple[]>(
'api/producto/?'+queryString
);
but got worse result
/api/producto/?fields=id%2CrefFabr%2CrefCliente%2CdescrCorta%2Cimagen&filter%5B0%5D=pieza.id%7C%7C%24eq%7C%7C1
What I don't understand is how I do this with my Postmand and it works!
api/producto/?fields=id,refFabr,refCliente,descrCorta,imagen&filter=coleccion.id||$eq||6
How can I make it work, what is wrong with my code?
Finally got the answer, just had to set the .query(false) on the RequestQueryBuilder, this boolean parameter is for encode, seams like Angular's HttpClient class does some encoding or something to the URL so, anyway
It Works! Here is the code:
getProductsOfPiece(pieceId: number): Observable<ProductSimple[]> {
let queryString = RequestQueryBuilder.create()
.select(["id","refFabr","refCliente","descrCorta","imagen"])
.setFilter({
field: "coleccion.id",
operator: CondOperator.EQUALS,
value: collectionId
}).query(false);
return this.http.get<ProductSimple[]>(
'api/producto/?'+queryString
);
}
And you need to import
RequestQueryBuilder of #nestjsx/crud-request
npm i #nestjsx/crud-request.
Any observations are welcome...
UPDATE
To create or update
Here are de docs
Create One https://github.com/nestjsx/crud/wiki/Controllers#create-one-resource
Update One https://github.com/nestjsx/crud/wiki/Controllers#update-one-resource
Following that guide the create and update are simple
Just do POST to the API 'api/producto/' (for example) with the object as body in the request
For the Update follows similar just using the PUT method and the API with the model id 'api/producto/1' (for example)
I have an array of id let's say
favorites = [102,110,112,125]
I want to retrieve the corresponding object for each id by passing it to query string like this :
public getFavorites(favs){
let favorites = favs.join();
let encodedUrl = encodeURIComponent(JSON.stringify({"id": favorites }));
return this.http.get(this.api_url + '/1/query/data/getFavs?parameters='+encodedUrl, {
headers: this.authHeader
})
.retry(3)
.map(res => res.json());
}
The problem is only one object appear in my html template and also in the console. What is the best way for me to pass an array of value to a URL as parameters in order to retrieve the associated objects?
You can pass multiple parameter values with the same name over the querystring. Does that help you? For example, here's a snippet:
this.api_url + '/1/query/data/getFavs?id=101&id=110
Here is another answer that has some more info on this.
If you have to send the ID's over in a serialized manner, consider posting the JSON instead of using the GET method. If you're trying to maintain adherence to REST verb standards by making it a get call, can you post the server code?
Application
A simple Search bar and a button where user enters a keyword and the response returned is from a RESTful server (HTTP GET requests)
simplesearch.ts
export class SimpleSearch {
kw: string; // keyword
resp: string; // response from Server
}
simplesearch.service.ts
Has a simple method called searchData which does a HTTP GET request with the user's keyword as a query search. (Code not included for brevity)
simplesearch.component.ts
/*All respective headers and #Component removed from brevity*/
const OUTPUT: SimpleSearch[] = []; // create an array for storing Objects
export class SimpleSearchComponent {
Output = OUTPUT; // define variable for array
constructor(private httpServ: SimpleSearchService, private temp: SimpleSearch) {}
/*Search button on HTML file does this*/
Search(inputVal: string) {
this.temp.kw = inputVal; // store the value of user's input
this.httpServ.searchData(inputVal)
.then(res => this.temp.resp = res); // store the response in temp.resp
// push the Object on the Output Array
this.Output.push({kw: this.temp.kw, resp: this.temp.resp});
}
}
Interpolation Variable
I use Output as an Interpolation Variable for my HTML template. I show the data in an unordered list
<ul>
<li *ngFor="let keyword of Output">
<span>{{keyword.kw}}</span>
</li>
</ul>
Response:
<ul>
<li *ngFor="let answer of Output">
<span>{{answer.resp}}</span> <!-- WHAT TO DO HERE for Array Index-->
</li>
</ul>
Result
I can see the keywords in a list every time a user inputs new keywords but
the responses in the wrong way
How do I pass Indexing with the Interpolation? Or am I thinking wrong?
The easy way out was to create two separate Array<String> for keywords and responses and this works great since I can use the index to delete the contents on the page too but with an Object in an Array I am confused with the key: value representation and the index of the Array (OUTPUT) itself.
The problem lies exactly where developer noticed, this.temp.resp is outside the async function. So when you are pushing items in your Output array, it's always pushing the previous search with the new keyword, therefore you are getting the behavior that the resp is always "one step behind". You can check this to understand this async behavior: How do I return the response from an Observable/http/async call in angular2?
So let's look at the code and explain what is happening. I assume you have initialized 'temp' since it isn't throwing an error on first search, where temp.resp would be undefined unless temp is initialized.
this.httpServ.searchData(inputVal)
// this takes some time to execute, so the code below this is executed before 'this.temp.resp' has received a (new) value.
.then(res => this.temp.resp = res);
// old value of 'temp.resp' will be pushed, or if it's a first search, empty value will be pushed
this.Output.push({kw: this.temp.kw, resp: this.temp.resp});
So how to solve this, would be to move the this.Output.push(... line inside the callback (then), so that the correct values will be pushed to the array.
Also I'd change your model to be an Interface instead of Class. But as to how to change the function and do the assignment inside the callback, I'd also shorten the code a bit and do:
Search(inputVal: string) {
this.httpServ.searchData(inputVal)
.then(res => {
// we are pushing values inside callback now, so we have correct values!
// and 'SimpleSearch' stands for the interface
this.Output.push(<SimpleSearch>{kw: inputVal, resp: res});
});
}
}
This should take care of it that the corresponding keyword will have the corresponding response! :)
PS. Worth noticing here, is that you'd maybe want to display the keyword while we are waiting for the response for that keyword, I ignored it here though and applied the same as you are currently using.
in my grails app I need to get some data from database and show it in a gsp page.
I know that I need to get data from controller, for example
List<Event> todayEvents = Event.findAllByStartTime(today)
gets all Event with date today
Now, how can I render it in a gsp page?How can I pass that list of Event objects to gsp?
Thanks a lot
You can learn many of the basic concepts using Grails scaffolding. Create a new project with a domain and issue command generate-all com.sample.MyDomain it will generate you a controller and a view.
To answer your question create a action in a controller like this:
class EventController {
//Helpful when controller actions are exposed as REST service.
static allowedMethods = [save: "POST", update: "POST", delete: "POST"]
def showEvents() {
List<Event> todayEvents = Event.findAllByStartTime(today)
[eventsList:todayEvents]
}
}
On your GSP you can loop through the list and print them as you wish
<g:each in="${eventsList}" var="p">
<li>${p}</li>
</g:each>
Good luck
I am not sure if this is really what you meant, because in that case I suggest you to read some more on the grails :), but anyway, for your case you can use render, redirect as well but here I am taking simplest way:
In your controller you have:
def getAllElements(){
List<Event> todayEvents = Event.findAllByStartTime(today)
[todayEvents :todayEvents ]
}
and then in the GSP(I assume you know about grails conventions, as if you don't specify view name, it will by default render gsp page with the same name as the function in the controller, inside views/):
<g:each in="${todayEvents}" var="eventInstance">
${eventInstance.<propertyName>}
</g:each>
something like this.