How to fetch data using http post request in Angular 7

Question

I am working on a "Searching Forms" scenario in Angular7. I have used http POST insted http GET although it needs to fetch an json object arrays from mysql database by using angular as frontend and spring-boot as backend. All the backend part is implemented and I'm having trouble to get those data to front end because i have used Http POST request.

I tried to use Http GET too. But i need to pass an json nested object. So i used POST.

This is my Spring boot Backend code:

SearchOutput[] search_output;
@PostMapping(value="/service")
@CrossOrigin(origins = "http://localhost:4200",allowedHeaders = "*")
public ArrayList<SearchOutput> SearchContract(@RequestBody SearchContract search_input) throws InterruptedException {


    rooms_adults[] rooms_adults2 = search_input.getRooms_adults();
    ArrayList<SearchOutput> OutputArray = new ArrayList<SearchOutput>();
    SearchOutput singleOutput;
    List<Integer> hotel_ids ;

    for (rooms_adults r_a : rooms_adults2) {

        hotel_ids= trueContdao.getHotelId(search_input.getCheck_in_date(), search_input.getCheck_out_date());

        for (int id:hotel_ids){
            List<Room_Type> roomTypes = roomTypedao.getHotelRoomType(id,r_a.getTotal_rooms(), r_a.getTotal_adults());

            for(Room_Type room:roomTypes){
                singleOutput=new SearchOutput(hotelContdao.getHotelName(room.getHotel_id()),room.getRoom_type(), (float) (room.getPrice()*search_input.getTotal_nights()*r_a.getTotal_adults()*r_a.getTotal_rooms()*1.15));
                OutputArray.add(singleOutput);
            }
        }

    }

    return OutputArray;

}

And My Front end Code is

import { Injectable } from '@angular/core';
import { HttpClient ,HttpErrorResponse, HttpHeaders} from '@angular/common/http';
import { SearchOutput } from './SearchOutput.model';


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

uri = 'http://localhost:9090/tickets';

searchOut: SearchOutput[]

reqHeader = new HttpHeaders({ 'Content-Type': 'application/json','No-Auth':'True' });

constructor(private http: HttpClient) { }

postSearch(SearchData){

return this.http.post<any>(this.uri+'/service',SearchData);

}

}

SearchOutput.model.ts is:

export class SearchOutput {
hotel_name: string;
room_type: string;
price: Float32Array;
}

Please help. Thanks in advance

did you try to subscribe to http post and get data in callback? — HDM91
– HDM91, Commented Jul 7, 2019 at 5:18
Please add the component in which you are calling the SearchService method postSearch() — nash11
– nash11, Commented Jul 7, 2019 at 5:23

yanky_cranky · Accepted Answer · 2019-07-07 05:26:08Z

1

1) Subscribe the request

2) Pass the request headers as third parameter inside httpOptions, refer http

3) Use Proxy.config to enable cors, to get the response of service hosted on different host(HttpVerb+hostname+port), refer Proxy Configuration

answered Jul 7, 2019 at 5:26

yanky_cranky

1,3631 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to fetch data using http post request in Angular 7

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related