What is the syntax error in my javaScript code?

Question

I have this javascript function that calls an async function and stores the result in an array. I get a syntax error on line 8 of the function. Error: "Uncaught SyntaxError: missing ) after argument list". I don't see any bracket issues in the function. Could someone please point out if they see any errors?

    async function ProcessWorkItem(workItems) {
        var tempData = [];
        workItems.relations.forEach(function(relation){
            if (relation.rel.includes("Forward")) {
                //console.log(i);
                var split = relation.url.split("/");                            
                var childId = split[split.length-1];
                tempData.push(await getChildWorkItem(childId));
            } 
        });
        console.log(tempData);
        return Promise.all(tempData)
    }

Nina Lisitsinskaya · Accepted Answer · 2019-10-28T14:48:24.997

3

await can only be used in async functions. Your internal function in the forEach should be async. Or you can remove async/await at all and just pass Promises to the array:

    function ProcessWorkItem(workItems) {
        var tempData = workItems.relations.map(function(relation){
            if (relation.rel.includes("Forward")) {
                //console.log(i);
                var split = relation.url.split("/");                            
                var childId = split[split.length-1];
                return getChildWorkItem(childId);
            } 
        });
        console.log(tempData);
        return Promise.all(tempData)
    }

edited Oct 28 '19 at 14:48

answered Oct 28 '19 at 14:32

Nina Lisitsinskaya

1,818
11
18

1

That won't work. The `forEach` loop will trigger the async functions, and then `return Promise.all(tempData)` will run before any of those async functions have resolved and put any data into `tempData`. – Quentin Oct 28 '19 at 14:34
@Quentin, thanks for pointing out issue. I have fixed it, probably. – Nina Lisitsinskaya Oct 28 '19 at 14:43
I don't know why you are creating an extra promise here. No need of `async` or `await` – Quentin Oct 28 '19 at 14:44
Hmm. Actually, if `getChildWorkItem` returns promise, it can be directly passed to the array, and to the `Promise.all`. Removed internal `async`/`await`. – Nina Lisitsinskaya Oct 28 '19 at 14:49
this doesn't work for me. getChildWorkItem is a rest client API call that returns a promise. To get the value from the promise and store it, I was using await in this for loop. The reason I need to use async-await is that I am making a series of async API calls. Based on the output of one, I need to perform the next action sequentially. When I do the way suggested 'return getChildWorkItem' returns a promise which is never resolved and I get an array of Promises. – Zankhana Rana Oct 28 '19 at 15:32
1

@ZankhanaRana — If you need to run them in serial and not in parallel (noting that you don't seem to be passing data from one to the next in your code) then you need to use a regular `for` loop and not a `forEach` or `map`. – Quentin Oct 28 '19 at 15:44
@Quentin Yes, it works with regular for loop. I am having performance issues there. While reading about that, I came across using forEach that will create multiple threads and each will work in parallel. The solution that is marked as the answer in the question linked works for me in the initial loading. I have a scenario where the user has the ability to load another list and view back the default list. To view back the default list, I call the same function that I do while initially loading, but this time, the display is triggered first and then the async function and I see an empty grid – Zankhana Rana Oct 28 '19 at 15:54
I am trying to understand how async-await exactly works. I now often need to use them, and I understand while working on it. But later while writing a new async-await function, I mess it up. That's the reason I am trying to understand the concept clearly so that I can write a clean code. I don't have enough knowledge and so, I am sorry to be vague about the requirement and the functionality. – Zankhana Rana Oct 28 '19 at 15:56
@NinaLisitsinskaya Could you please explain how should I resolve the array of Promises further? – Zankhana Rana Oct 28 '19 at 16:05
I was able to resolve the promises, and my performance increased significantly. Thanks @NinaLisitsinskaya – Zankhana Rana Oct 28 '19 at 16:13

sagecoder · Answer 2 · 2019-10-28T19:45:33.040

-2

You cannot use await in non-async function

The function (the forEach callback function) that contain the await is not an async function

This is the updated function

 async function ProcessWorkItem(workItems){
    var tempData = [];
    var relations = workItems.relations;
    var relationNum = relations.length;
    for(var i = 0; i < relationNum; i++){
       var relation = relations[i]
      if (relation.rel.includes("Forward")) {
       var split = relation.split("/");
       var childId = split[split.length-1];
       tempData.push(getChildWorkItem(childId));
      }
    }
    console.log(tempData);
    return Promise.all(tempData);

})

}

edited Oct 28 '19 at 19:45

answered Oct 28 '19 at 14:33

sagecoder

101
5

That won't work. The `forEach` loop will trigger the async functions but it won't wait for them to resolve before continuing to the next line (which expects `tempData` to be populated). – Quentin Oct 28 '19 at 14:35
Oh, I see. Yes, I missed that. I am trying and let you know. But wouldn't then the error be you cannot await in an async function? why do I see the missing ')' syntax error? – Zankhana Rana Oct 28 '19 at 14:35
I changed the code a little. I added the async keyword in my foreach function. And Instead of using tempData, I am updating a global variable. That seems to have resolved the syntax error. But I am not sure if it is returning the correct output. I am checking that – Zankhana Rana Oct 28 '19 at 14:38
So, this worked for my syntax error. I do have an issue with the loading of the array. which is a logical issue. I will mark this as correct answer as I asked only about the syntax error. And adding async to the foreach loop seems to resolve it. But, I still don't understand why? Can you please explain me that? I wouldn't expect a missing ) error in this case – Zankhana Rana Oct 28 '19 at 14:42
1

@ZankhanaRana — `await` is the first argument. After the first argument you need either a `,` (and then the next argument) or `)` (to end the arguments). You shouldn't accept this. It doesn't solve your problem. It makes things worse. – Quentin Oct 28 '19 at 14:45
Because the callback function of the forEach was not **async function** so **await** will not work function that is not async – sagecoder Oct 28 '19 at 14:48
@Quentin, did you read the question because I dont understand your argument – sagecoder Oct 28 '19 at 14:55
Fixing the syntax error while making the code do something different to what was intended — white it does act as an answer to the *literal* question — does not make a **good** answer. – Quentin Oct 28 '19 at 14:59
@Quentin I agree with you that my problem is not fully solved. But, I also don't understand your argument. Can we chat here on stack overflow if you could provide me with some explanation? – Zankhana Rana Oct 28 '19 at 15:36
1

@ZankhanaRana — Reading the comment thread on Nina Lisitsinskaya's answer would probably help (note that they fixed it after the first comment I made, and improved it after the second one) – Quentin Oct 28 '19 at 15:43
@Quentin, the question was about why the await was giving error that is why I wrote the code. thanks the code has been updated – sagecoder Oct 28 '19 at 19:36

What is the syntax error in my javaScript code?

2 Answers2