Как вывести переданные массив json c сервера на клиент ajax? python+flask+jquery

165

22 декабря 2021, 21:20

Не получается вывести массив json в виде таблицу в html

На сервере с flask передаю dict через jsonify и json.dumps

@app.route('/ajax_upload', methods=['GET', 'POST'])
def ajax_upload():
    dict_result = {'data': 'test', 'price': 'test'}    
    return jsonify(json_dict=json.dumps(dict_result))

На клиенте получаю и вывожу в html

<script type=text/javascript>
$(function() {
    $('#upload-file-btn').click(function() {
        var form_data = new FormData($('#upload-file')[0]);
        $.ajax({
            type: 'POST',
            url: '/ajax_upload',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                console.log('Success!');
                 for (var key in data.json_dict) {
                 var item = data.json_dict[key];
                 $('#json').html("<p>Тут"+item.data+"</p><br>");
                 console.log(item.data);
                 }
            },
        });
    });
});
</script>
<span id=json></span>

Показывает undifined Как правильно обработать json чтобы вывести его таблицей?

Answer 1

решение

отдаем во flask обычный dict через jsonify:

return jsonify(result=json_dict)

принимаем в html+jquery и выводим json:

$(function() {
    $('#upload-file-btn').click(function() {
        var form_data = new FormData($('#upload-file')[0]);
        $.ajax({
            type: 'POST',
            url: '/ajax_upload',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                console.log('Success!');
                $("#result").text(data.result);
                var output='<ul>';
                for(var key in data.json_dict) {
                    output += '<li>' + key + ':' + data.json_dict[key] +'</li>';
                    }
                output+="</ul>";
                document.getElementById("json").innerHTML=output;
            },
        });
    });
});
<div id="json"></div>