jsからpythonへjsonを送りpython側でjsonの辞書形式に変換しようとするとエラーが出る

前提

ここに質問の内容を詳しく書いてください。
（例）
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

実現したいこと

プログラミング初心者です。
jsでjson形式に変換しajaxとflaskを使ってpythonに送りpython側で辞書形式に変換し返すものを実装中にエラーが発生しました。
json_str = json.loads(data)の部分を書かないで送られてきたデータをそのまま返すようにするとエラーが出ないのでajaxでの通信はうまくいっていると思うのですが、json_str = json.loads(data)を書いたとたんエラーが出ます。
ここに実現したいことを箇条書きで書いてください。

▲▲機能を動作するようにする

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

エラーメッセージ
jquery-3.6.1.min.js:2          POST http://127.0.0.1:5000/test 500 (INTERNAL SERVER ERROR)
jquery-3.6.1.min.js:2          POST http://127.0.0.1:5000/test 500 (INTERNAL SERVER ERROR)

該当のソースコード

python

import random
import json


array = random.sample(range(1,54),53)
def speed(data):
    if data == "first":
        return array[0:4]
    else:
        json_str = json.loads(data)
        return json_str

該当のソースコード

js
ソースコード
$(document).ready(function(){
    json_str = "first";
    json = JSON.stringify(json_str);
    $.ajax ({
        url: '/test',
        type: 'post',
        data: json,
        contentType: "application/json",
    }).done(function(data) {
        console.log(data)
        $(".me-card-number-1").attr({
            "alt": data[0]
        });
        $(".me-card-number-2").attr({
            "alt": data[1]
        });
        $(".me-card-number-3").attr({
            "alt": data[2]
        });
        $(".me-card-number-4").attr({
            "alt": data[3]
        });
    }).fail(function() {
        alert("失敗")
    });
});

var count = 4;

$(".me-card-number-1").on("click",function() {
    let str = $(this).attr("class");
    count += 1;
    let data = {"str":str,"count":count};
    console.log(count);
    json = JSON.stringify(data);
    console.log(json)
    $.ajax({
        url: '/test',
        type: 'post',
        data: json,
        dataType:"json",
        contentType: "application/json",
    }).done(function(data) {
        console.log(data);
        $(".me-card-number-1").attr({
            "alt": data
        });
    }).fail(function() {
        alert("失敗");
    });
});

$(".me-card-number-2").on("click",function() {
    const str = $(this).attr("class");
    count += 1;
    let json_array = {"str":str,"count":count};
    console.log(str)
    json = JSON.stringify(json_array);
    $.ajax({
        url: '/test',
        type: 'post',
        data: json,
        contentType: "application/json",
    }).done(function(data) {
        console.log(data)
        $(".me-card-number-2").attr({
            "alt": data
        });
    }).fail(function() {
        alert("失敗");
    });
});

$(".me-card-number-3").on("click",function() {
    const str = $(this).attr("class");
    count += 1;
    var json_array = {"str":str,"count":count};
    console.log(str)
    json = JSON.stringify(json_array);
    $.ajax({
        url: '/test',
        type: 'post',
        data: json,
        contentType: "application/json",
    }).done(function(data) {
        console.log(data)
        $(".me-card-number-3").attr({
            "alt": data
        });
    }).fail(function() {
        alert("失敗");
    });
});

$(".me-card-number-4").on("click",function() {
    const str = $(this).attr("class");
    count += 1;
    var json_array = {"str":str,"count":count};
    console.log(str);
    json = JSON.stringify(json_array);
    $.ajax({
        url: '/test',
        type: 'post',
        data: json,
        contentType: "application/json",
    }).done(function(data) {
        console.log(data)
        $(".me-card-number-4").attr({
            "alt": data
        });
    }).fail(function() {
        alert("失敗");
    });
});

app.py
ソースコード
from flask import Flask
from flask import request
from flask import render_template
import json
import main

app = Flask(__name__)

#ページが開かれたときindex.htmlを表示させる
@app.route("/")
def index():
    return render_template(
        "index.html"
    )

@app.route('/test', methods=['POST'])
def test():
    if request.method == 'POST':
        data = request.json
        #https://python.keicode.com/lang/functions-call-function-defined-in-another-file.php#1
        #送られてきたデータをmain.pyのspeed関数に渡す
        main_data = main.speed(data)
    return main_data

# webサーバーの立ち上げ
if __name__ == "__main__":
    app.run(debug=False)

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

HTML部分がよくわからなかったので、以下で試しました。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
7
8</head>
9<body>
10<script>
11
12$(document).ready(function(){
13    let str = 'string';
14    count = 1;
15    let data = {"str":str,"count":count};
16    console.log(count);
17    json = JSON.stringify(data);
18    console.log(json)
19    $.ajax({
20        url: '/test',
21        type: 'post',
22        data: json,
23        dataType:"json",
24        contentType: "application/json",
25    }).done(function(data) {
26        console.log(data);
27        $(".me-card-number-1").attr({
28            "alt": data
29        });
30    }).fail(function() {
31        alert("失敗");
32    });
33});
34
35</script>
36</body>
37</html>

送っているデータはlet data = {"str":str,"count":count};ですが、app.pyのmain_data = main.speed(data)あたりでdataの型を見ると、dictになっています。
json.loads()はstrを期待していますが、dictを渡しているのでエラーになっているのではないかと思います。
試しに、json_str = json.dumps(data)としたら、ブラウザのコンソールにそのまま表示されるようになりました。

上記回答が期待と異なる場合は、現象が再現する最小のコードの提示をお願いします。
具体的にはHTML部分も書いて下さい。

投稿2022/09/26 14:58

FiroProchainezo

総合スコア2443

kunn

2022/09/27 00:34

回答ありがとうございます。回答通りjson_strの方をdumps変えてみたところコンソールに表示されましたが、Python側でいじるために json_str = json.dumps(data) Json_str1 = json_str[“count ”] return json_str1 にしたところまたエラーが出ます。。。また、「送っているデータはlet data = {"str":str,"count":count};ですが、app.pyのmain_data = main.speed(data)あたりでdataの型を見ると、dictになっています。」とのことですがこれはjs側の json_JSON.stringify( data )のところでうまくjsonに変換ができてないということですかね？

FiroProchainezo

2022/09/27 00:52

まず、プログラムで全角は不可ですので、半角で書いて下さい。また、countは存在するかもしれませんが、「count 」は存在しません。最後の半角スペースが余計です。書くべきなのは["count"]です。エラーが出ます、と書くならエラーメッセージを省略せずに全文書いて下さい。文面からはどこでエラーが出ているのかわかりませんし、上記回答もただの推測です。

kunn

2022/09/27 01:09

json_str = json.dumps(data) json_str1 = json_str["count"] return json_str1 に書き直しましたが、うまくいきません。。。

FiroProchainezo

2022/09/27 01:24

あれ、json.dumps(data)してから使ってますか？ json.dumpsの戻り値はstrなので、json_str["count"]はアクセスできません。 dictで操作したいなら、data["count"]でアクセスして、それをstrに変換して使うか、from flask import jsonifyあたりで、jsonifyをインポートして、return jsonify(data["count"])みたいな感じで返して下さい。

kunn

2022/09/27 01:51

ありがとうございます！できました！初心者で意味のわからないことを言っていたかもしれませんが丁寧に教えていただきありがとうございました！

行動規範の内容に同意します