How to resolve promise after loading large FileAttachment in Observable Framework

Community Help
1

I’m trying to use FileAttachment to load a fairly large json file that contains a pre-built Lunr.js index.

const index = FileAttachment("./data/idx-visitor-logs.json").json();

When I attempt to display the contents I get the following…

Promise {
  <prototype>: Promise {
  constructor: ƒ()
  then: ƒ()
  catch: ƒ()
  finally: ƒ()
  Symbol(Symbol.toStringTag): "Promise"
  }
}

I assume I am doing something wrong, unless I have to write the code to be able to manually resolve the promise after the file is loaded?

2

It’s hard to say without seeing more code, but it is probably the case that you are trying to use index in the same code block as it is defined. Framework only automatically resolves promises and handles reactivity between blocks, not within them.

So if you have

```js
const index = FileAttachment("./data/idx-visitor-logs.json").json();
display(index);
```

Then you will see what you described. You either need to explicitly wait for the promise:

```js
const index = await FileAttachment("./data/idx-visitor-logs.json").json();
display(index);
```

or move the definition of index and its usage into different blocks:

```js
const index = FileAttachment("./data/idx-visitor-logs.json").json();
```

```js
display(index);
```
3

Yep! See the Promises section for more:

https://observablehq.com/framework/reactivity#promises

1 Like
4

Thanks @mythmon … I was trying to execute them within the same code block. Separating them worked.

5

Thanks @mbostock …

Dunno if there’s a better place to suggest this, but the word promise in The value of volcano above is a promise. In other code blocks, the promise is implicitly awaited and hence you can refer to the resolved value directly. on this page goes to a dead page.

Might be helpful to point it to Reactivity | Observable Framework

6

Thank you @chrislkeller ; fixing the documentation here.