Javascript：访问单个元素时，对象数组返回未定义。即使其中保存了 696 个对象

Question

我是 Javascript 的初学者，所以如果这个问题有点明显，我已经很抱歉了。所以我的练习包括在 d3 的帮助下保存来自 csv 文件的信息。之后我只想显示该数组的第一个元素。

当我执行console.log(editedData) 时，它会在控制台中出现一个包含 696 个元素的数组 Array(696)，但是当我尝试执行 console.log(editedData[0]) 时，控制台会显示 undefined。起初我认为这种行为是由于同步冲突而发生的，但使用 Promises 后我仍然得到相同的结果......

const editedData = [];

const organizedData = () => {
  return new Promise((resolve, reject) => {
    d3.csv("testData.csv").then(function(data){
      data.map( element => {
        const dateAndTime = element.date.split(" ");
        const dataBlock = {
          date: dateAndTime[0],
          time: dateAndTime[1],
          testInfo: element.info1,
          testInfo2: element.info2,
          testInfo3: element.info3
        }
        editedData.push(dataBlock);
      });
    });
    resolve();
  });
}

const diplayData = () => {
  //console.log(editedData) ==> Array(696)
  //console.log(editedData) ==> undefined
  console.log(editedData[0]);
}

organizeData().then(displayData());

有人可以帮我解决这个问题吗？我想知道为什么会出现这个问题，我该如何解决？

Answer 1

Promise.resolve() 必须有结果值。

const editedData = [];

const organizedData = () => {
  return new Promise((resolve, reject) => {
    d3.csv("testData.csv").then(function(data){
      data.map( element => {
        const dateAndTime = element.date.split(" ");
        const dataBlock = {
          date: dateAndTime[0],
          time: dateAndTime[1],
          testInfo: element.info1,
          testInfo2: element.info2,
          testInfo3: element.info3
        }
        editedData.push(dataBlock);
      });
    });
    resolve(editedData);
  });
}

Answer 2

您需要在 d3.csv then 函数中调用 resolve.. 就在 data.map 函数之后