FileAttachment in ObservableHQ - different behaviour if within 2 cells or 1: TypeError: reading.map is not a function

Question

如果我将以下代码放在单个 Observable HQ 单元格中，我会得到

data5 = TypeError: reading.map is not a function

data5 = {
  const reading = FileAttachment("climate_graphs - china.csv").csv();
  reading.map(function(element) {
    return {"date": element["date"], "value": element["value"]}
  })
}

但是，如果我将它分成 2 个单元格，它会起作用：

// cell 1
reading = FileAttachment("climate_graphs - china.csv").csv();


// cell 2
data = reading.map(function(element) {
  return {"date": element["date"], "value": element["value"]}
})

Answer 1

在documentation for FileAttachment中它指出.csv()是FileAttachment的一个异步方法：

Calling FileAttachment doesn’t immediately load the file—the contents are only loaded when you request them. It’s a bit like the Fetch API: there are async methods that return the file’s contents in different forms, such as JSON, CSV, or ArrayBuffer. You choose the appropriate method based on how you want to consume the file.

但是这个问题可能更清楚，因为在后一种情况下，您有 1 个单元格来读取文件/1 个单元格来处理数据；该文件被读取并分配给 reading 隐式 async/ await。而且，如果您遇到错误，您需要在块中指定 await。

所以，这应该有效：

data5 = {
  // use await below
  const reading = await FileAttachment("climate_graphs - china.csv").csv();
  // 'reading' is now an array of objects so can use 'map'
  let mapping = reading.map(function(element) {
    return {"date": element["date"], "value": element["value"]}
  });
  return mapping;
}

通常，Introduction to Promises:

中的文档中提到了具有这种 Promise 特定行为的单元格

Did you see the promise? Observable implicitly awaits promises across cell boundaries, so you often don’t need to deal with a promise directly. Cells can return promises, and other cells can simply refer to the values and they’ll run when the promise resolves.

FileAttachment in ObservableHQ - different behaviour if within 2 cells or 1: TypeError: reading.map is not a function

FileAttachment in ObservableHQ - different behaviour if within 2 cells or 1: TypeError: reading.map is not a function

d3.js

observablehq