Monday 9 November 2020

how to convert ajax post call api in angular8

Client given below Ajax call to post the data to there server, but I am not able to understand how to convert this call into component.ts and servervice

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script type="text/javascript">
 $.ajax
 ({
  type: "POST",
  url: 'https://xyz/client/schedule',
  contentType: 'application/json',
  data: JSON.stringify({
    "apiKey": "myapikey"
  }),
  dataType : 'json',
  headers: {
  'authorization': '<?php echo $authorization; ?>'
  },
  success: function(retval)
  {
  // alert(retval);
  console.log(retval);
  // var success = retval.success;
  }
  });
  </script>

I have updated Question and added after two replied answer

Below is component.ts on button click passing static values

import { Schedule } from '../Models/Schedule.model'


Schedule: Schedule = new Schedule();

addSchedule(scheduleForm: NgForm): void {
this.Schedule.ClassTitle='rrrr444v Class on 3rd April, 2020';
this.Schedule.ClassInfo= 'This is a demo class scheduled to understand API';
this.Schedule.ClassDateTime= '2020-11-12 11:30 AM';
this.Schedule.TimeZone= 'Asia/Kolkata';
this.Schedule.ClassDuration= '15';
this.Schedule.ClassRecording= 'yes';     
this.Schedule.ClassAutoStart= 'false';    
this.Schedule.RecordingAutoStart= 'false';
this.Schedule.ClassVideoRes= '720';


 const data = { 
 apiKey: "7777", 
 data: this.Schedule 
 } 
  this.subscription = 
   this.userSvc.fetchData("xyz.com", data ) 
.subscribe( 
 data => { 
 // Data on Success 
 console.log("data", data); 
 }, 
 error => { 
 console.log("error", error+'hihii'); 
 } 
 ); 


 }

Below is service.ts

  fetchData(url: string, data: any): Observable<any> {
  const headers = {
    
   Authorization: "Bearer 123456",
  "My-Custom-Header": "foobar",
   contentType: "application/json"
   };

   return this.http.post(url, data, {
    headers
   });
  }

in console getting this error.

enter image description here



from how to convert ajax post call api in angular8

No comments:

Post a Comment