質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
GET

GETとはHTTPが対応するリクエストメソッドの一つです。クライアントからサーバーへ送られたURLパラメータのデータを取得する時必要がある時に使われます。

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

5464閲覧

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

kichinosukey

総合スコア5

GET

GETとはHTTPが対応するリクエストメソッドの一つです。クライアントからサーバーへ送られたURLパラメータのデータを取得する時必要がある時に使われます。

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/12/01 13:51

前提・実現したいこと

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} # この時点では想定通りのレスポンスが得られています

該当のソースコード

javascript

1unction reqListener() { 2 console.log(this.response); 3} 4 5function openRequest(requestURL) { 6 var request = new XMLHttpRequest(); 7 request.addEventListener("load", reqListener); 8 request.open('GET', requestURL); 9 request.responseType = 'json'; 10 request.send(); 11 return request; 12} 13 14function getData(request, col) { 15 return request.response[col]; 16 } 17 18var documentElement = document.getElementById("file_info") 19var filename = documentElement.getAttribute("filename") 20var x_col = documentElement.getAttribute("x_col") 21var y_col = documentElement.getAttribute("y_col") 22 23var requestURL = 'http://127.0.0.1:5000/api/data/' + filename; 24var request = openRequest(requestURL); 25console.log(typeof(request.response["data"]) == 'object') # ここでエラーが発生します: null is not an object (evaluating 'request.response["data"]') 26

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

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

投稿2019/12/02 00:23

編集2019/12/02 00:30
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

JavaScript

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

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

投稿2019/12/02 00:20

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/12/02 00:26

openRequest() の中、見てなかった^^; yambejp さんの回答でしょうね。
kichinosukey

2019/12/02 14:09

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

0

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

javascript

1function openRequest(requestURL, x_col, y_col) { 2 var request = new XMLHttpRequest(); 3 request.open('GET', requestURL); 4 request.responseType = 'json'; 5 request.onload = function() { 6 var xcol_idx = getColumnIndex(request.response["columns"], x_col); 7 var ycol_idx = getColumnIndex(request.response["columns"], y_col); 8 plot(request.response["data"], xcol_idx, ycol_idx); 9 } 10 request.send(); 11 return request; 12} 13 14function getColumnIndex(columns, name) { 15 for(var i = 0; i < columns.length; i++) { 16 if (columns[i] == name){ 17 return i; 18 } else {} 19 } 20} 21 22function plot(dataset, xcol_idx, ycol_idx) { 23 var width = 400; // グラフの幅 24 var height = 300; // グラフの高さ 25 var margin = { "top": 30, "bottom": 60, "right": 30, "left": 60 }; 26 27 // 2. SVG領域の設定 28 var svg = d3.select("#scatter").append("svg").attr("width", width).attr("height", height); 29 30 // 3. 軸スケールの設定 31 var xScale = d3.scaleLinear() 32 .domain([d3.min(dataset, function(d) { return d[xcol_idx]; }), d3.max(dataset, function(d) { return d[xcol_idx]; })]) 33 .range([margin.left, width - margin.right]); 34 35 var yScale = d3.scaleLinear() 36 .domain([d3.min(dataset, function(d) { return d[ycol_idx]; }), d3.max(dataset, function(d) { return d[ycol_idx]; })]) 37 .range([height - margin.bottom, margin.top]); 38 39 // 4. 軸の表示 40 var axisx = d3.axisBottom(xScale).ticks(5); 41 var axisy = d3.axisLeft(yScale).ticks(5); 42 43 svg.append("g") 44 .attr("transform", "translate(" + 0 + "," + (height - margin.bottom) + ")") 45 .call(axisx) 46 .append("text") 47 .attr("fill", "black") 48 .attr("x", (width - margin.left - margin.right) / 2 + margin.left) 49 .attr("y", 35) 50 .attr("text-anchor", "middle") 51 .attr("font-size", "10pt") 52 .attr("font-weight", "bold") 53 .text("X Label"); 54 55 svg.append("g") 56 .attr("transform", "translate(" + margin.left + "," + 0 + ")") 57 .call(axisy) 58 .append("text") 59 .attr("fill", "black") 60 .attr("x", -(height - margin.top - margin.bottom) / 2 - margin.top) 61 .attr("y", -35) 62 .attr("transform", "rotate(-90)") 63 .attr("text-anchor", "middle") 64 .attr("font-weight", "bold") 65 .attr("font-size", "10pt") 66 .text("Y Label"); 67 68 // 5. プロットの表示 69 svg.append("g") 70 .selectAll("circle") 71 .data(dataset) 72 .enter() 73 .append("circle") 74 .attr("cx", function(d) { return xScale(d[xcol_idx]); }) 75 .attr("cy", function(d) { return yScale(d[ycol_idx]); }) 76 .attr("fill", "steelblue") 77 .attr("r", 4); 78} 79 80var documentElement = document.getElementById("file_info") 81var filename = documentElement.getAttribute("filename") 82var x_col = documentElement.getAttribute("x_col") 83var y_col = documentElement.getAttribute("y_col") 84 85var requestURL = 'http://127.0.0.1:5000/api/data/' + filename; 86openRequest(requestURL, x_col, y_col);

投稿2019/12/02 14:07

kichinosukey

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問