How to send JSON data from node to angular 4

Question

I have just started working on node and angular and I am unable to pass JSON data which I have on my nodejs file to my angular component and render it on the screen on click of a button. Thank you for the help.

This is the JSON data I want to pass

{
 Customer_ID: 1507843123970,
 Bank_Account_Number: 7885236985412589,
 Bank_Name: "Some Bank",
 Bank_Address1: "Some Address",
 Bank_Address2: null,
 Account_Holder_Name: "Some Name",
 Account_Type: "Savings",
 Transaction_Limit: 5000
}

My service file looks like this

@Injectable()
export class ServerService {
constructor(private http: Http) {}

getServer() {
  return this.http.get('http://localhost:3000/addFunds')
    .map(
      (response: Response) => {
        const data = response.json();
        return data;
      }
    );
  }
}

And the typescript file looks like this

export class AddFundComponent implements OnInit {
@ViewChild('addFundForm') addFundForm: NgForm;
showHidden = false;
showBankDetail = false;
showSubmit = true;

servers: Observable<any>;

constructor(private serverService: ServerService) { }

ngOnInit() {
  this.servers = this.serverService.getServer();
}
onGet() {
  this.serverService.getServer().subscribe(
    (data) => {
      // const data = response.json();
      console.log(data);
    },
    (error) => console.log(error)
  );
 }
}

why do you create const inside mapper? you can return response.json() — Alejandro Camba
– Alejandro Camba, Commented Oct 12, 2017 at 21:36

Dmitry Grinko · Accepted Answer · 2017-10-12 22:33:05Z

nodejs + expressjs

const express = require('express'),
      config = require('./config'),
      app = express();

app.get('/addFunds', (req, res) => {
       res.json({
           Customer_ID: 1507843123970,
           Bank_Account_Number: 7885236985412589,
           Bank_Name: "Some Bank",
           Bank_Address1: "Some Address",
           Bank_Address2: null,
           Account_Holder_Name: "Some Name",
           Account_Type: "Savings",
           Transaction_Limit: 5000
       });
    });

app.listen(config.port, function(){
    console.log('http://127.0.0.1:' + config.port);
});

module.exports = app;

http.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class HttpService {
  private actionUrl: string;
  private headers: Headers;
  private options: RequestOptions;

  constructor(public _http: Http) {
    this.actionUrl = 'example.com';
    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json');
    this.headers.append('Accept', 'application/json');
    this.headers.append('Access-Control-Allow-Headers', 'Content-Type, X-XSRF-TOKEN');
    this.headers.append('Access-Control-Allow-Origin', '*');
    this.options = new RequestOptions({ headers: this.headers });
  }

  get(request: string): Observable<any> {
    return this._http.get(`${this.actionUrl}${request}`)
      .map(res => this.extractData(res))
      .catch(this.handleError);
  }

  private extractData(res: Response) {
    return res.json();
  }

  private handleError(error: Response) {
    console.log('Error', error);
    return Observable.throw(error.json().error || 'Server error');
  }

}

funds.service.ts

import { Injectable } from '@angular/core';
import { HttpService } from './http.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class FundsService {
  constructor(public httpService: HttpService) {}

  getFunds(): Observable<any> {
    return this.httpService.get('/addFunds')
      .map(res => res);
  }
}

funds.component.ts

export class FundsComponent {
funds: Funds;

constructor(private fundsService: FundsService) { 
    this.funds = new Funds();
}

onGet() {
    this.fundsService.getFunds().subscribe(
        data => {
          console.log(data);
          this.funds = data;
        }
    );
  }
}

funds.component.html

<input type="text" [(ngModel)]="funds.Bank_Name">

Hope it helps!

how do I display the json data to my component template on..say an input field?
Actually you will use not json in your funds.component.ts but javascript object

Collectives™ on Stack Overflow

How to send JSON data from node to angular 4

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related