How to use a promise model with collection data (and d3)?

Ask us anything How do I?
1

I need to create a chart with d3 and org-chart. I’ve added them with npm (and it failed to work) then I’ve added them as libs to the page.

When I use the sample code inside the sandbox, it works, but when I try to pass a collection, is says

TypeError: collections.abfedc00-e0d5-46b5-992f-0f9aab18880a?.data.then is not a function

I’ve tried to log the content of collection (and it was a bad idea because it exposes all api keys and headers), but I still need the contents of the collection to match the provided usage examples.

Here’s the code I need to implement with my collection:
Js (forked) - StackBlitz

So how to wrap the data from array to use .then constructions?

2

I’ve tried without any .then (because collection.data returns a json array and it worked), but for future, can I somehow use a promise model (.then) on collection data?

1 Like
3

You’re not in the same context as your stackblitz example.

In stackblitz you’re first loading csv data from an url, then you’re creating the chart.
In WeWeb you have already the data inside the collection so you don’t have to use then.

If you’re trying to create the chart before data are ready, you can try something else =>
In your workflow use a fetch collection action, then, in a second javascript action the data will be there, in the collection, because we already wait the previous action to be finished before starting the next one. So you dont need a promise.

// Do directly
new d3.OrgChart()
 .blabla()
 .data(collections.abfedc00-e0d5-46b5-992f-0f9aab18880a?.data)

I’m not sure how your data must be formatted before injecting it inside d3 that said. You may have to transform you data with javascript before initialising org chart.

Edit :

I’ve tried without any .then (because collection.data returns a json array and it worked), but for future, can I somehow use a promise model (.then) on collection data?

I dont think we expose the promise related to the current fetch, it could be useful, I will note it. You will do something like collections.abfedc00-e0d5-46b5-992f-0f9aab18880a.promise.then(data => console.log(data))

1 Like
4

Thank you! Now it works! Kinda strange, but svg chart generates faster then standard weweb collection view.

5

Do you mean your bound collection list show up after the chart ?

6

No, I use the same collection (RestAPI RPC from Supabase) for the chart and to show the data as a table. Chart generates much faster than the table. I change the view with the conditional rendering by pressing the button (I use it instead of tabs because it’s more predictable).