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

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

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

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

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

Python

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

Q&A

解決済

1回答

3825閲覧

htmlの配列データpostして、pythonrequest.dataでとれずに困っています。

meJ15

総合スコア55

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

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

Python

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

0グッド

1クリップ

投稿2018/11/22 12:57

編集2018/11/23 04:07

前提・実現したいこと

htmlで作った配列データをpythonで確認したいのですが、うまくデータがとれません。

いまhtml内で作った配列データをボタンを押したら、ajaxを使ってPOSTでpythonに送ろうとしています。

python側は受け取った配列を関数の引数にしていますが、
TypeError: 'builtin_function_or_method' object is not subscriptable
toiuエラーが出ています。たぶん配列をおくったはずが、送れていない?

そこでpythonに送らているデータを見ようと思い下のようなコードにしていますが、
/predict/のほうにとんでも、白紙のページしかありません。

html側の問題であると考えていますが、いろいろネット情報を探ってコードを書き換えても、解決しなかったため質問します。

webでユーザが作った配列データをpythonに送りその情報で判別する機械学習アプリを作っています。

参考動画
書いた文字を機械学習的に判別するシステムをもとにしています。

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

\my_csv.py", line 69, in check_genre writer.writerows[(arr)] TypeError: 'builtin_function_or_method' object is not subscriptable

該当のソースコード

html

1#一部です 2<script type="text/javascript" src="../static/jquery-3.3.1.min1.js"></script> 3<script type="text/javascript"> 4qButton.onclick = () =>{ 5 console.table(arr); 6 var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; 7 $.ajax({ 8 type: "POST", 9 url: $SCRIPT_ROOT + "/predict/", 10 data: arr, 11 traditional: true, 12 }); 13} 14</script>

python

1import json 2from flask import request 3from flask import Flask, render_template 4#予測するpyプログラム 5import my_csv 6 7import pandas as pd 8import numpy as np 9import serial 10import datetime 11import csv 12import time 13import matplotlib.pyplot as plt 14import random 15#scientific computing library for saving, reading, and resizing images 16from scipy.misc import imsave, imread, imresize 17 18#for matrix math 19import numpy as np 20#for regular expressions, saves time dealing with string data 21import re 22 23#system level operations (like loading files) 24import sys 25#initalize our flask app 26app = Flask(__name__) 27@app.route('/') 28def index(): 29 with open("index.html", "rb") as f: 30 return render_template('index.html') 31 32@app.route('/predict/',methods=['GET','POST']) 33def predict(): 34 csvdata = request.data 35 #request.dataが配列ならlabel,とpercentを返す。 36 #label,percent = my_csv.check_genre(csvdata) 37 #return label,percent 38 return csvdata

試したこと

元のソース
imgData = request.get_data()を
csvdata = request.dataと変えたり、

↓元のhtmlを変えていますが、何が悪いのかわかりません。
$(".myButton").click(function(){
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
var canvasObj = document.getElementById("canvas");
var img = canvasObj.toDataURL();
$.ajax({
type: "POST",
url: $SCRIPT_ROOT + "/predict/",
data: img,
success: function(data){
$('#result').text(' Predicted Output: '+data);
}

ほぼ確実なのがHTMで作成した配列データを送れていないということです。

イメージ説明
console.table(arr);での出力がこのような感じです。
________________________________________________11/23
html側を変えずに
pythonを変えてみると、データらしいものは届いていますが、undefinedになっています。

html

1console.table(arr); 2 var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; 3 $.ajax({ 4 type: "POST", 5 url: $SCRIPT_ROOT + "/predict/", 6 data: arr, 7 traditional: true, 8 }); 9

python

1@app.route('/predict/',methods=['GET','POST']) 2def predict(): 3 print((request.get_data()).decode('utf-8')) 4 print(type(request.get_data())) 5 csvdata = request.get_data() 6 print(csvdata)

![イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

Python

\my_csv.py", line 69, in check_genre
writer.writerows[(arr)]
TypeError: 'builtin_function_or_method' object is not subscriptable

writer.writerows[(arr)]writer.writerows([arr])では?

投稿2018/11/22 13:00

LouiS0616

総合スコア35658

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

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

meJ15

2018/11/22 13:25

何が違うのか10回ぐらい見返しました。ありがとうございます。おかげでプログラムが動くようになりました。それだけでは配列の中身が何もなしだったので pyの中の csvdata = request.dataを csvdata = request.get_data()にしました。 my_csv.pyの中に arrを受け取るって print(arr)があるのですが、 (app.py)csvdata = request.dataだとb'' (app.py)csvdata = request.get_data()だと b'undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=&undefined=' となってしまっています。 これは何がおこっているのでしょうか? デコードができていないのでしょうか?
LouiS0616

2018/11/22 13:30

JS側で console.table(arr) していますが、データは適切に表示されているのですか?
meJ15

2018/11/22 13:37

はい。30行2列の配列が確認できています。
LouiS0616

2018/11/22 13:41

なるほど。 すみません、Web系の知識はからきしないので、これ以上のアドバイスはできそうにありません。
meJ15

2018/11/22 13:51

var canvasObj = document.getElementById("canvas"); var img = canvasObj.toDataURL(); $.ajax({ type: "POST", url: $SCRIPT_ROOT + "/predict/", data: img, success: function(data){ $('#result').text(' Predicted Output: '+data); 元ソースを見ると画像からbase64?というものにエンコードしてからデータとして送っているので、 配列をbase64でエンコードしてから送ればいけそうな気がしますがわからないです。 とりあえずやってみます。 ありがとうございます。
gh640

2018/11/23 00:46

横から失礼します。 `$.ajax()` で送ったデータが Flask 側で取得できないとのことですね。 同様の環境をすぐに再現できないので解決策をご提示することはできませんが、 `jQuery.ajax()` と `flask.Request` のドキュメントはどちらもわかりやすく書かれているので、手探りであれこれ試される前にドキュメントを一度お読みになると問題の解決がスムーズなのではないかと思います。 - http://api.jquery.com/jquery.ajax/ - http://flask.pocoo.org/docs/1.0/api/#flask.Request `jQuery.ajax()` は引数 `settings` の中の `data` や `mimeType` のあたりを、 `flask.Request` は次のアトリビュートやメソッドの説明をご覧になるとよいのではないかと思います。 - `data` - `files` - `form` - `get_data()` - `get_json()` JS 側は、配列がダメなら `data: {"img": img}` という感じで適当なキーをつけてオブジェクトのパターンで試してみる、 Flask 側は `data` `files` `form` `get_data` `get_json` あたりをひととおり print してみる、 というのが、問題を理解するのに手早いのではないかと思います。
meJ15

2018/11/23 04:16

新しく試したことを追加しました jqueryのウェブのdataをみると data Type: PlainObject or String or Array Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below). valueが配列の場合、jQueryはtraditional設定値に基づいて複数の値を同じキーでシリアル化します(後述)(google翻訳) よくわからずにtraditional をtrueとfalseにしてやってみましたが、どちらも結果は同じでした。 このウェブを見る限り、配列で送ることは特別できないわけではなさそうですが、それの変換がpython側で取れていないのでしょうか?
meJ15

2018/11/23 04:42

</script> <script type="text/javascript"> qButton.onclick = () =>{ console.table(arr); arr = arr.join("\n") console.table(arr) var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; $.ajax({ type: "POST", url: $SCRIPT_ROOT + "/predict/", data: arr, }); } こうすることで、一次元の配列でおくるようにしました、、、 後の処理も変えなきゃいけないですが、、 ありがとうございます
gh640

2018/11/23 09:57 編集

状況をご共有くださりありがとうございます。確かにネストされた配列が問題なのかもしれませんね。おそらく( arr.join("\n") よりも)確実なのは、次のように、やりとりするときは必ず JSON にすることではないかと思います。 `data: {'data':JSON.stringify(arr)},` 同じようにネストされた配列が `jQuery.ajax()` でうまく扱えない、というような主旨の質問がありました。こちらもご参考になるかもしれません: https://stackoverflow.com/questions/11747373/how-to-pass-multi-dimensional-array-with-jquery-ajax-post/11747502
meJ15

2018/11/25 04:57

回答ありがとうございます。 JSONのほうが確実ということを知らなかったのでためになります。 またお願いします!!
gh640

2018/11/25 05:23

`arr.join("\n")` だと、中のデータ次第では Python 側で正しく復元できない可能性もあるので、その意味で JSON の方がより確実、という発言でした :D
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問