CODEWITHSUNDEEP
javascriptreactjsloopsobject
AdamSulc
AdamSulc

Reputation: 450

Update value of state when looping through object

I have following object with these attributes:

enter image description here

What I need is to loop my code snippet so that with every loop the variable arrayPosition would increment and the value of file[arrayPosition].file would change as well, based on arrayPosition. The value of this.state.videoSource would dynamically change as well, since its is based on file[arrayPosition].file.

This is my code right now:

const response = await dataProvider(GET_MANY, 'vid', { ids: videoId })
const file = response.data;
var arrayPosition = 0;

var sigkey = "key";
var formBody = new FormData();
formBody.set('ver', "1.2");
formBody.set('key', "key");
formBody.set('video_id', file[arrayPosition].file);
formBody.set('user_id', "1234");
formBody.set('format', "json");
formBody.set('ip', "");
formBody.set('tts', "0");
formBody.set('nonce', Math.round((new Date()).getTime() / 1000));

var sign_fields = [formBody.get('video_id'), formBody.get('user_id'), formBody.get('ip'), formBody.get('tts'), formBody.get('ver'), formBody.get('key'), formBody.get('nonce')];
var data = sign_fields.join(':');
var signature = hmacsha256(data, sigkey);

formBody.set('sig', signature);

var formBodyStringified = new URLSearchParams(formBody).toString();

 const resJson = await fetch(Config.api.livebox, {
       method: 'POST',
       body: formBodyStringified,
       headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
       }
   }).then(res => res.json());
   const finalJsonUrl = 'https:' + resJson.hls;
   this.setState({ videoSource: finalJsonUrl });
   arrayPosition++;

Any suggestions how can I loop this code sample so that the value of file[arrayPosition].file would change based on value of arrayPosition?

If something is unclear just ask. Thank you in advance.

Upvotes: 1

Views: 50

Answers (1)

Ricardo Gonzalez
Ricardo Gonzalez

Reputation: 1879

So based on the assumption that you want to create a form for each file you can try something like this with the map method. The map method takes an array and creates a new array based on a reference of the previous array:


const response = await dataProvider(GET_MANY, 'vid', { ids: videoId })
const file = response.data;
var arrayPosition = 0;

let formPerFile = file.map( f => {

  var sigkey = "key";
  var formBody = new FormData();
  formBody.set('ver', "1.2");
  formBody.set('key', "key");
  // HEre instead of use the reference of file wth the arrayIndex we just can use the f variable provided by our iterator 
  formBody.set('video_id', f.file);
  formBody.set('user_id', "1234");
  formBody.set('format', "json");
  formBody.set('ip', "");
  formBody.set('tts', "0");
  formBody.set('nonce', Math.round((new Date()).getTime() / 1000));

  var sign_fields = [formBody.get('video_id'), formBody.get('user_id'),  formBody.get('ip'), formBody.get('tts'), formBody.get('ver'), formBody.get('key'), formBody.get('nonce')];
  var data = sign_fields.join(':');
  var signature = hmacsha256(data, sigkey);

  formBody.set('sig', signature);

  var formBodyStringified = new URLSearchParams(formBody).toString();

// YOu need to make this request per file? 
// Or you have a service taht can `post` all the forms from one request?
  const resJson = await fetch(Config.api.livebox, {
       method: 'POST',
       body: formBodyStringified,
       headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
       }
   }).then(res => res.json());

   return 'https:' + resJson.hls;

} );

  // Here you can store the video sources returned from the map method in your state instead of storing just one value
   this.setState({ videoSource: formsPerFile });

Is this approach correct for your objective? or are you trying something different?

Upvotes: 1

Related Questions