send data from node.js to angular with get()

Question

I want to retrieve data (an array) from a node.js file with angular. I tried on my node.js file:

app.get('/search', function(req, res){
    res.send(data);
});

And I've some difficulties to retrieve it on angular. I've created a service:

data: any;

getDictionnary(): Observable<String[]> {
    var dataGet = this.http.get('/search').pipe(map(data => this.data=data.json()));
    console.dir(dataGet);
    return dataGet;
};

ngOnInit() {
    this.data = this.getDictionnary();
}

I've read that this.http.get() return an Observable<Response> but I don't know what to do with that. I've searched some documentation on it but I didn't find anything really useful.

The part pipe(map(data => this.data=data.json())) is just something that I tried but when I try to display the data object I got an undefined.

Can you help me with to understand how all of this works? Thank you!

Edit: Result of the console.get(dataGet):

Observableoperator: MapOperatorproject: ƒ (data)arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]length: 1name: ""prototype: {constructor: ƒ}constructor: ƒ (data)arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]length: 1name: ""prototype: constructor: ƒ (data)arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]length: 1name: ""prototype: {constructor: ƒ}constructor: ƒ (data)arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]length: 1name: ""prototype: {constructor: ƒ}constructor: ƒ (data)arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]length: 1name: ""prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: dictionnarymanager.service.ts:17[[Scopes]]: Scopes[3]__proto__: Object__proto__: ƒ ()[[FunctionLocation]]: dictionnarymanager.service.ts:17[[Scopes]]: Scopes[3]__proto__: Object__proto__: ƒ ()[[FunctionLocation]]: dictionnarymanager.service.ts:17[[Scopes]]: Scopes[3]__proto__: Object__proto__: ƒ ()[[FunctionLocation]]: dictionnarymanager.service.ts:17[[Scopes]]: Scopes[3]__proto__: Object__proto__: ƒ ()apply: ƒ apply()arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]bind: ƒ bind()call: ƒ call()caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]constructor: ƒ Function()length: 0name: ""toString: ƒ toString()Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()get arguments: ƒ ()arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]caller: (...)length: 0__proto__: ƒ ()[[Scopes]]: Scopes[0]set arguments: ƒ ()get caller: ƒ ()set caller: ƒ ()__proto__: Object[[FunctionLocation]]: <unknown>[[Scopes]]: Scopes[0]No properties[[FunctionLocation]]: dictionnarymanager.service.ts:17[[Scopes]]: Scopes[3]thisArg: undefined__proto__: call: ƒ (subscriber, source)arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]length: 2name: ""prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: map.js:17[[Scopes]]: Scopes[2]constructor: ƒ MapOperator(project, thisArg)__proto__: Objectsource: Observable_isScalar: false_subscribe: ƒ (responseObserver)arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)]length: 1name: ""prototype: constructor: ƒ (responseObserver)__proto__: Object__proto__: ƒ ()[[FunctionLocation]]: http.js:1016[[Scopes]]: Scopes[3]__proto__: Object_isScalar: false__proto__: Object

I assume (from `res.send`) that you're using ExpressJS? If so, please tag it. Also, is the page your Angular code is running on in the same [origin](http://en.wikipedia.org/wiki/Same_origin_policy) as `/search`? (The use of a relative path suggests "yes", but...) — T.J. Crowder, Jul 02 '18 at 09:16
i have used in your case you have not using correct path in angular get method — Chellappan வ, Jul 02 '18 at 09:19
I want to have the data on the page `http://localhost:4200/search` so inside the get I have to put '/search' That's it ? — Adrien Voisin, Jul 02 '18 at 09:32
`app.get('/search', function(req, res){ console.log(data) res.send(data); });` Like this. — Anuradha Gunasekara, Jul 02 '18 at 12:26

score 0 · Answer 1 · answered Jul 02 '18 at 09:18

You need to subscribe to the observable

     let observable: Observable<Response> = this.http.get('/search',requestOptions);
     observable.subscribe((response: Response) => {
     let responseData: any = response.arrayBuffer().byteLength > 0 ? response.json() : {}; 
 });

score 0 · Answer 2 · answered Jul 02 '18 at 09:20

0

Try this.

data: any;

getDictionnary(): Observable<String[]> {
    return this.http.get('/search').pipe(map(data => this.data=data.json()));
};

ngOnInit() {
    this.getDictionnary().subscribe((response) => {
       this.data = response;
    });
}

answered Jul 02 '18 at 09:20

Anuradha Gunasekara

6,553
2
27
37

I've tried this but it's still the same. I've created a simple `Display()` methode in my service which contains only a `console.log(data)` but when I run this method in my component I've just a `undefined` – Adrien Voisin Jul 02 '18 at 09:35
Can you add a console inside the `getDictionnary` to get the ouptput of the data? And please update the answer with that – Anuradha Gunasekara Jul 02 '18 at 09:37
With a console.log() I only get that my object is an Observable – Adrien Voisin Jul 02 '18 at 11:20
Can you add the json response that is sent by the backend – Anuradha Gunasekara Jul 02 '18 at 11:23
I don't have a JSON but I added what I get in the console – Adrien Voisin Jul 02 '18 at 12:10
How can I see the json sent by the backend. I just realized that I had misunderstood what you said. – Adrien Voisin Jul 02 '18 at 12:18
That's strange nothing is written in the console as if the console.log() wasn't there. – Adrien Voisin Jul 02 '18 at 12:46

score 0 · Answer 3 · answered Jul 02 '18 at 09:32

You can try this solution as given :

In HttpService:

  import { Injectable } from '@angular/core';

    import {
        HttpClient,
        HttpErrorResponse,
        HttpHeaders
    } from '@angular/common/http';

    import { Observable ,  Subject } from 'rxjs';

    @Injectable({
        providedIn: 'root'
    })
    export class HttpService {

        constructor(private httpClient: HttpClient) {


        }

      getData(url,body, options): Observable<any>{
          return this.httpClient.get(url, options);
        }
    }

In component

private data: string[] = [];
constructor(private http: HttpService){
this.getDictionnary();
}

getDictionnary(){

this.http.getData(url,options).subscribe((resp:any) => {

 this.data = resp.data

}
}

here options are extra parameters to request as: options = { headers: new HttpHeaders({ "Authorization": "Bearer " + this.session.get("access_token"), "Content-Type": "application/json" }) } — Akj, Jul 04 '18 at 05:02

send data from node.js to angular with get()

3 Answers3

Linked