CODEWITHSUNDEEP
angularspring-boot
Ahkam Mohammed
Ahkam Mohammed

Reputation: 61

How to fetch data using http post request in Angular 7

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

Upvotes: 0

Views: 1130

Answers (1)

yanky_cranky
yanky_cranky

Reputation: 1363

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

Upvotes: 1

Related Questions