Rendering proxies returned from async method of WebView2 host object

Question

I am using WebView2 and looking for an example of how to work with of an array of objects in JavaScript returned by a C# host object's method. I am trying to access the properties of each proxy in the return array in a simple/direct manner but each property member of the C# object is returned as a Promise in JavaScript, making them awkward to work with.

For example, this works...

const ents = await window.chrome.webview.hostObjects.myType.GetEntities();

for (const p of ents) {
    let name = await p.name;
    console.log(name);
}

BUT I wish to simply access the properties directly on the returned objects in the array like this...

for (const p of ents) {
    console.log(p.name);
}

NOTE that I do not want to use synchronous window.chrome.webview.hostObjects.sync... because the sync version blocks the UI thread.

Here is the C# method being invoked by the code above.

public MyEntity[] GetEntities()
{
    // Simulate long-running (exaggerates UI blocking)
    Thread.Sleep(1000);

    return
    [
        new MyEntity { Name = "foo" },
        new MyEntity { Name = "bar" },
        new MyEntity { Name = "baz" }
    ];
}

Answer 1

Call sync() on the returned (asynchronous) proxy to get the synchronous object.

const ents = await window.chrome.webview.hostObjects.myType
    .GetEntities()
    .sync();