There is the following code:

for(let i = 1; i <= length; i++){ VK.Api.call('groups.getById', {group_id: groups[i].gid, fields: 'description'}, (output) => { showVisual(groups[i]); console.log(output); }) }


The problem is that the for loop is already completed when we get the answer in the callback.
How to make a request synchronous?

1 answer 1

Assuming that your problem is in an incorrect i value in a callback, I suggest closing the value of this variable:

 for(let i = 1; i <= length; i++){ VK.Api.call('groups.getById', {group_id: groups[i].gid, fields: 'description'}, ((i) => (output) => { showVisual(groups[i]); console.log(output); })(i) ); }

Or, you can add a group value to the closure:

 for(let i = 1; i <= length; i++){ VK.Api.call( 'groups.getById', {group_id: groups[i].gid, fields: 'description'}, ((group) => (output) => { showVisual(group); console.log(output); } )(groups[i]) ); }

With Promise you can implement this:

 function getGroupDescription(group) { return new Promise(resolve => VK.Api.call(..., resolve)); } for (let i = 1; i <= length; ++i) { getGroupDescription(groups[i]).then(output => console.log(output)); }

The async/await problem in its cascading distribution - in order to use it, the client must wrap its code in the async function:

 function getGroupDescription(group) { return new Promise(resolve => VK.Api.call(..., resolve)); } async function foo () { // ... for (let i = 1; i <= length; ++i) { groups[i].description = await getGroupDescription(groups[i]); } } foo();

Working example:

 function timedTwice(val, time = 1000) { return new Promise(res => setTimeout(() => res(2*val), time)); } timedTwice(5).then(r => console.log(r)); async function foo() { for (let i = 0; i < 8; ++i) { let result = await timedTwice(i, 100); console.log(i, result); } } foo();