XMLHttpRequest GETのレスポンスがnullになってしまう

Question

前提・実現したいこと

macOS
python3.7
Flask 1.1.1

Flask + html + javascript でローカルのcsvファイルを読み込んでブラウザでそのデータを可視化するためのシンプルなアプリを作っています。

jsからFlaskのapiにXMLHttpRequestでGETリクエストを送り、レスポンスに含まれるデータを取得する際に以下のエラーが発生します。

このエラー原因の特定にご協力いただけますと助かります。

発生している問題・エラーメッセージ

null is not an object (evaluating 'request.response["data"]')

EventListenerのログ

{x1: Array, x2: Array, y: Array} # この時点では想定通りのレスポンスが得られています

該当のソースコード

unction reqListener() {
  console.log(this.response);
}

function openRequest(requestURL) {
    var request = new XMLHttpRequest();
    request.addEventListener("load", reqListener);
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();
    return request;
}

function getData(request, col) {
   return request.response[col];
  }

var documentElement = document.getElementById("file_info")
var filename = documentElement.getAttribute("filename")
var x_col = documentElement.getAttribute("x_col")
var y_col = documentElement.getAttribute("y_col")

var requestURL = 'http://127.0.0.1:5000/api/data/' + filename;
var request = openRequest(requestURL);
console.log(typeof(request.response["data"]) == 'object') # ここでエラーが発生します: null is not an object (evaluating 'request.response["data"]')

試したこと

MozillaのXHR周りのドキュメントはざっと見ましたが、原因の特定にはいたりませんでした。
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Answer 1

openRequestがreturn requestしてますが非同期処理なので
addEventListener("load"をpromiseで待たないといけません

古いブラウザを見捨てていいならfetchでやるのが妥当です

Answer 2

意図した内容が返ってないだけでは？

console.log(request.response["data"])

とでもして、中身を確認するか、ブラウザの開発ツールでレスポンスを確認すると良いと思います。

Comments

[退会済みユーザー]

openRequest() の中、見てなかった^^;

yambejp さんの回答でしょうね。

[kichinosukey]

ご回答どうもありがとうございました。今後ともよろしくお願いします。

Answer 3

頂いた回答をヒントに解決することができました。皆さんありがとうございます。
yambejpさんが仰られていたようにfetchでの解決を試みましたが、promiseオブジェクトの取り扱いがわからなかったためひとまずXMLHttpRequestを用いた方法で解決しました。いかがそのコードになります。openRequest内でrequest.onloadを設定してロード時にプロットさせてしまう処理に変更しました。

function openRequest(requestURL, x_col, y_col) {
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.onload = function() {
      var xcol_idx = getColumnIndex(request.response["columns"], x_col);
      var ycol_idx = getColumnIndex(request.response["columns"], y_col);
      plot(request.response["data"], xcol_idx, ycol_idx);
    }
    request.send();
    return request;
}

function getColumnIndex(columns, name) {
  for(var i = 0; i < columns.length; i++) {
    if (columns[i] == name){
      return i;
    } else {}
  }
}

function plot(dataset, xcol_idx, ycol_idx) {
  var width = 400; // グラフの幅
  var height = 300; // グラフの高さ
  var margin = { "top": 30, "bottom": 60, "right": 30, "left": 60 };

  // 2. SVG領域の設定
  var svg = d3.select("#scatter").append("svg").attr("width", width).attr("height", height);

  // 3. 軸スケールの設定
  var xScale = d3.scaleLinear()
    .domain([d3.min(dataset, function(d) { return d[xcol_idx]; }), d3.max(dataset, function(d) { return d[xcol_idx]; })])
    .range([margin.left, width - margin.right]);

  var yScale = d3.scaleLinear()
    .domain([d3.min(dataset, function(d) { return d[ycol_idx]; }), d3.max(dataset, function(d) { return d[ycol_idx]; })])
    .range([height - margin.bottom, margin.top]);

  // 4. 軸の表示
  var axisx = d3.axisBottom(xScale).ticks(5);
  var axisy = d3.axisLeft(yScale).ticks(5);

  svg.append("g")
    .attr("transform", "translate(" + 0 + "," + (height - margin.bottom) + ")")
    .call(axisx)
    .append("text")
    .attr("fill", "black")
    .attr("x", (width - margin.left - margin.right) / 2 + margin.left)
    .attr("y", 35)
    .attr("text-anchor", "middle")
    .attr("font-size", "10pt")
    .attr("font-weight", "bold")
    .text("X Label");

  svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + 0 + ")")
    .call(axisy)
    .append("text")
    .attr("fill", "black")
    .attr("x", -(height - margin.top - margin.bottom) / 2 - margin.top)
    .attr("y", -35)
    .attr("transform", "rotate(-90)")
    .attr("text-anchor", "middle")
    .attr("font-weight", "bold")
    .attr("font-size", "10pt")
    .text("Y Label");

  // 5. プロットの表示
  svg.append("g")
    .selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) { return xScale(d[xcol_idx]); })
    .attr("cy", function(d) { return yScale(d[ycol_idx]); })
    .attr("fill", "steelblue")
    .attr("r", 4);
}

var documentElement = document.getElementById("file_info")
var filename = documentElement.getAttribute("filename")
var x_col = documentElement.getAttribute("x_col")
var y_col = documentElement.getAttribute("y_col")

var requestURL = 'http://127.0.0.1:5000/api/data/' + filename;
openRequest(requestURL, x_col, y_col);