Ionic sends same data multiple times to the server which is supposed to send different data

Ionic Framework
1

Hi, In my ionic app, I’m sending http post requests containing json data to a server. App is supposed to send multiple requests inside a loop with different data (client_id, image, image_name).

In my code, I’m sending framed images from a video (video is framed each one second). Of course ionic app sends multiple request to the server as required. But the data is same for all requests (data relevant to the last framed thumbnail image). How can I solve this problem.

Relevant code segments are as follows.

  • getExecute method get called from html script once a video is selected.
async getExecute(event) {
    console.log("[INFO] called getExecute()");
    this.isVideoSelected = true;
    this.videoDuration = event.target.duration;
    this.noOfFrames = 0;

    this.getDurationandFrame();
    await this.delay( Number(this.videoDuration) * 70 );   // 70 ms wait for each 1s
    this.readImages();
    
  }
  • getDurationandFrame function do framing.
async getDurationandFrame() {                                  // get duration and devide video into frames
      for(var i=0; i<=Number(this.videoDuration); i++) {
          var option: CreateThumbnailOptions = {
          fileUri: this.pathToBeFramed,
          outputFileName: 'capture'+i,
          atTime: i,        // frame-rate (1 s)
          quality: 100
        };
        
        console.log("framing at "+i+"s");
        
        this.videoEditor.createThumbnail(option).then(async res=>{
            console.log('Thumbnail result: ' + res);
            this.thumbnailPath = res;
        }).catch(err=>{
          console.log("Framing Error", err)
        });
  
        this.noOfFrames += 1;
  
      }
  
  }
  • readImages() function calls readFile and upload functions for each framed image.
async readImages() {
    // get thubnail path
    var arr = String(this.thumbnailPath).split('/');
    arr.pop();
    var path = '';
    for(var i=1; i<arr.length; i++) {
      path = path + '/' + arr[i];
    }
    path = path + '/';

    // read content on each image
    for(var i=0; i<this.noOfFrames; i++) {
      var img_name = 'capture' + i;

      var result;
      this.readFile(path, img_name).then(async res => {
        result = res;
        if(res===undefined) {
          console.log("undefined")
        } else {
          await this.uploadImage_Json(result, img_name);
        }
        
      });
    }

    return await true;

  }
  • readFile function reads a given image from the storage and return
async readFile(filepath, filename) {
    return new Promise(async resolve => {
      this.base64.encodeFile(filepath+'/'+filename+'.jpg').then(async (base64String: string) => {
        let imageSrc = base64String.split(",");
        resolve(imageSrc[1]);
      });
    });
 
  }
  • uploadImage_Json function uploads given image to the server.
async uploadImage_Json(image, image_name) {
    console.log("uploadImage_Json : check 01 : ", image_name);
    let headers = new Headers(
      { 'Content-Type' : 'application/json' }
    );

    let data = JSON.stringify(
      {
        client_id: this.client_id,
        image: image,
        image_name: image_name
      }
    );

    let options = new RequestOptions({headers: headers});

    return new Promise(async (resolve, reject) => {
      this.http.post('http://31.344.245.25:5000/predict', data, options).toPromise().then(
        async (res) => {
          console.log('API Response : ', res.json());
          resolve(res.json());
        }
      ).catch(
        (err) => {
          console.log('API Error : ', JSON.stringify(err));
          reject(err.json());
        }
      );
    });

  }