Loop through object in async method

Question

I have an object that looks like this and stores some attributes:

Basically what I need is to loop through this object and get the file attribute of every key that I would later use in my code to generate multiple Video-React components. I tried to use map() function but the site will crash with the error:

Parsing error: Can not use keyword 'await' outside an async function.

Even though the code sample that I am working with is inside an async function.

Here is my code:

            const response = await dataProvider(GET_MANY, 'vid', { ids: videoId })
            const file = response.data;
            file.map( source => {
                var videoPosition = 0;
                var sigkey = "sigkey";
                var formBody = new FormData();
                formBody.set('ver', "1.2");
                formBody.set('key', "key");
                formBody.set('video_id', file[videoPosition].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 });
                videoPosition++;
            });

Any suggestions how can I loop through the object?

Thank you in advance.

use for of instead of map. Also your not using the return of map, so forEach would have been more logical. — Keith
– Keith, Commented Oct 15, 2019 at 12:26
Put all the code inside a function with a keyword async. and inside that async function you can use as much await — sa_n__u
– sa_n__u, Commented Oct 15, 2019 at 12:26
You need to include the async keyword in front of the callback passed to response.map, May I also suggest you put the map inside of a Promise.all — Dan Starns
– Dan Starns, Commented Oct 15, 2019 at 12:29
@Keith Would you mind to post an example please? I am really not good with loops. — AdamSulc
– AdamSulc, Commented Oct 15, 2019 at 12:36

Melchia · Accepted Answer · 2019-10-15 12:50:46Z

2

You should include an async tag even inside your map function:

file.map(async source => {
                var videoPosition = 0;
                var sigkey = "sigkey";
                var formBody = new FormData();
                formBody.set('ver', "1.2");
                formBody.set('key', "key");
                formBody.set('video_id', file[videoPosition].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());

Or you could use Promise.all:

const fetchList = file.map(source => {
                var videoPosition = 0;
                var sigkey = "sigkey";
                var formBody = new FormData();
                formBody.set('ver', "1.2");
                formBody.set('key', "key");
                formBody.set('video_id', file[videoPosition].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 request = fetch(Config.api.livebox, {
                    method: 'POST',
                    body: formBodyStringified,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    }
                }).then(res => res.json());
return request;
 });

const resJsons = Promise.all(fetchList);
resJsons.forEach(resJson => {
                const finalJsonUrl = 'https:' + resJson.hls;
                this.setState({ videoSource: finalJsonUrl });
                ...
}

edited Oct 15, 2019 at 12:50

answered Oct 15, 2019 at 12:26

Melchia

24.5k23 gold badges110 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Keith Over a year ago

But do be aware this will execute all mapped elements in parallel. And also loses error handling.

Melchia Over a year ago

I suppose that's what the PO wanted judging from the code. If concurrency is a problem I would use a promise.all

canbax Over a year ago

I would have use file.map( async (source) => { 'cuz its more clear that we define a function

Melchia Over a year ago

you'd have a better performance but like @Keith mentioned you'd have a problem if it's not managed well.

spender Over a year ago

Without some effort to limit concurrency, this could be fairly catastrophic.

|

sa_n__u · Accepted Answer · 2019-10-15 13:44:31Z

0

You use await in this line:

const resJson = await fetch(Config.api.livebox)

but is not correct usage. because parent function is map callback function and it not async!.

edited Oct 15, 2019 at 13:44

sa_n__u

3361 silver badge10 bronze badges

answered Oct 15, 2019 at 12:26

Saeed Jalali

4364 silver badges17 bronze badges

Collectives™ on Stack Overflow

Loop through object in async method

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related