d3.js 数组无法正确输出

r3i60tvu  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(153)
let test = [];

d3.csv("cgvList.csv", function (data) { 
    if (data.poi_nm == "CGV") { 
      let obj = {};
      obj.content = '<div>' + data.branch_nm + '</div>';

      test.push(obj); 
    }
});
console.log(test);
console.log("test[0] : " + test[0]);
console.log("test.length : " + test.length);
[enter image description here][1]

我把csv文件做成了一个对象数组。
作为输出数组的结果,数组被很好地输出,enter image description here,但是当输出索引0时,出现undefined,并且数组的长度也是0。
从控制台打印时,打印正确。
有什么问题吗?
enter image description here

dl5txlt9

dl5txlt91#

如果没有jsfiddle或沙盒,我无法确切地说出发生了什么,但我相信发生的是两件事的混合:

  1. d3.csv是一个async function,因此返回一个承诺。
    1.传递给d3.csv的函数应该告诉函数如何解析csv中的每个元素,并且应该返回解析后的对象,而不是将其添加到外部数组或类似的东西中。
    至少有两种可能的方法可以解决这个问题:
  2. await异步函数,它的返回值将是您所需的值,类似于
const test = await d3.csv("cgvList.csv", function (data) { 
    if (data.poi_nm == "CGV") { 
      let obj = {};
      obj.content = '<div>' + data.branch_nm + '</div>';

      return obj; 
    }
});
console.log(test);
console.log("test[0] : " + test[0]);
console.log("test.length : " + test.length);

请注意,这里传递给d3.csv的函数以您希望的格式返回对象!
1.在.then语句中执行您的逻辑,该语句也等待实现承诺:

d3.csv("cgvList.csv", function (data) { 
    if (data.poi_nm == "CGV") { 
      let obj = {};
      obj.content = '<div>' + data.branch_nm + '</div>';

      return obj; 
    }
}).then((test) => {
   console.log(test);
   console.log("test[0] : " + test[0]);
   console.log("test.length : " + test.length);
});

相关问题