How to call/Get the out parameter from an API to Angular4

Question

Here I am working with a post method on angular 4 web app.When entering data and click the confirm button the values(data) are saved to the db.It works successfully, but my problem is at the same time when the post method is done an ID(return value) is passing from the DB to the API(for Angular )for another function parameter. Here how to take that value to my angular? I want that value as the next function parameter. Actually I am new in angular if any problem in my question please pardon me. (I want TransactionId value from api to angular)

This is my typescript(TS file)

 onClick() {
this.header = new IHeaderstock(this.userid, this.created, this.CompanyID, 
this.modified, this.modifieduserid, this.confirm, this.shopid);
this.headeritems.push(this.header);

this._enqService.CatchHeaderDetail(this.headeritems)
        .subscribe(value => {
            if (typeof value !== 'undefined' && value != null) {
                value.forEach(header => {
                    this.headeritems.push(this.header)
                });
            }
        },
            error => {
                console.error(error);
                this.statusMessage = "Problem with the service.Please try again after sometime";
            });
additem{
   this.items = new IStockitems(this.shopid,value.ItemCode, value.ItemDescription, value.PackingtypeName, value.Stock, this.TransactionId );
 }   //here this.TransactionId is the returned value from the above post method.

This is my service file

      CatchHeaderDetail(stock: any)
    : Observable<IHeaderstock[]> {
    let stockheaderdetail = stock;
    console.log(stockheaderdetail)
    debugger;
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this._http.post('http://localhost:3071/api/Stockcountheader/' + 'Stock', stockheaderdetail, options)
        .map((response: Response) => <IHeaderstock[]>response.json())
        .catch(this.handleError);

}

This is MY WebAPI(note my API return the value successfully)

My API is(it is working fine)


 public class StockcountheaderController : ApiController
    {
        private adminv2Entities enqentities = new adminv2Entities();
       [HttpPost]
        private  IActionResult Stock([FromBody] List<spGetNewStockCountHeader_Result> 
 jsonvalues)    
{
  ObjectParameter TransactionId = new ObjectParameter("TransactionId", typeof(Int32));
  foreach (spGetNewStockCountHeader_Result Datastock in jsonvalues)
  {

    spGetNewStockCountHeader_Result Stockobject = new spGetNewStockCountHeader_Result();
    Stockobject.UserID = Datastock.UserID;
    Stockobject.created = Datastock.created;
    Stockobject.CompanyID = Datastock.CompanyID;
    Stockobject.modified = Datastock.modified;
    Stockobject.modifieduserid = Datastock.modifieduserid;
    Stockobject.confirm = Datastock.confirm;
    Stockobject.ShopId = Datastock.ShopId;
    enqentities.spGetNewStockCountHeader(Datastock.UserID, Datastock.created, Datastock.CompanyID, Datastock.modified, Datastock.modifieduserid, Datastock.confirm,Datastock.ShopId, TransactionId);
  }
return Ok(new { data = TransactionId.Value});    
}

Answer 1

The problem is that in your API method you are returning return "Ok(new { data = TransactionId.Value});" but in sercive method or function you are returning

IHeaderstock ARRAY .map((response: Response) => <IHeaderstock[]>response.json()), You should return either an integer type in your service in angular or change the transaction value to IHeaderstock array.

Answer 2

In the API code you're returning what looks like a json-object containing an integer value. In the service you've specified that the response will be an array of values of type IHeaderStock.

So you can make some changes on either side to fix this. For one, you can remove the IHeaderStock<> type from the service like so

  CatchHeaderDetail(stock: any)
: Observable<any> {
let stockheaderdetail = stock;
console.log(stockheaderdetail)
debugger;
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this._http.post('http://localhost:3071/api/Stockcountheader/' + 'Stock', stockheaderdetail, options)
    .map((response: Response) => response.json())
    .catch(this.handleError);

}