如何在python中解析jsonify對象並以html顯示？

Question

我有一個flask應用程序，它從jsonify函數返回輸出，但是在html上顯示的輸出不是很漂亮。 現在，我將解析此輸出並對其進行修改，然后再將其返回給html。 我試圖遍歷json輸出，但它不允許我這樣做。 我怎么做？

首先是我網頁上jsonify函數的輸出

預測：Apple Cedar銹，99.6459424495697，Bell_Pepper健康，0.2868120325729251，藍莓健康，0.05757397739216685

我想要這樣的東西

預測 ：

蘋果雪松銹：99.6459424495697

Bell_Pepper健康：0.2868120325729251

藍莓健康：0.05757397739216685

現在這是我的app.py文件中相同代碼

@app.route('/predict', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        # Get the file from post request
        f = request.files['file']

        # Save the file to ./uploads
        basepath = os.path.dirname(__file__)
        file_path = os.path.join(
            basepath, 'uploads', secure_filename(f.filename))
        f.save(file_path)

        result = model_predict(file_path, model)
        return jsonify(result)

    return None

最后這是我的main.js文件的代碼

$.ajax({
    type: 'POST',
    url: '/predict',
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    async: true,
    success: function (data) {
        // Get and display the result
        $('.loader').hide();
        $('#result').fadeIn(600);
        $('#result').text(' Prediction:  ' + data);
        console.log('Success!');
    },
});

Answer 1

您可以返回HTML字符串，該字符串可用作#result div的主體：

在您的app.py ，在upload ：

...
result = model_predict(file_path, model)
return flask.jsonify({'html':'\n'.join(f'<p>{a}: {b}</p>' for a, b in result)})

在main.js ：

$.ajax({
  type: 'POST',
  url: '/predict',
  data: form_data,
  contentType: false,
  cache: false,
  processData: false,
  async: true,
  success: function (data) {
    // Get and display the result
    $('.loader').hide();
    $('#result').fadeIn(600);
    $('#result').append(data.html); //add previously formatted html to div
    console.log('Success!');
   },
});

---

值的Javascript呈現：

在app.py ：

import json
result = model_predict(file_path, model)
return flask.jsonify({'payload':json.dumps([{'name':a, 'val':b} for a, b in result])})

在main.js ：

$.ajax({
 type: 'POST',
 url: '/predict',
 data: form_data,
 contentType: false,
 cache: false,
 processData: false,
 async: true,
 success: function (data) {
    // Get and display the result
   $('.loader').hide();
   $('#result').fadeIn(600);
   var new_data = JSON.parse(data.payload);
   $('#result').append('Prediction: ');
   for (var i in new_data){
     var _html = `
       <p>${new_data[i].name}: ${new_data[i].val}</p>
     `
      $('#result').append(_html);
   }
   console.log('Success!');
  },
});

Answer 2

假設result是傳遞給jasonify(result)的有效json對象，則需要遍歷main.js的數據對象，並以編程方式顯示key:value對。 像這樣：

// data =  { 'Apple Cedar rust': '99.6459424495697', ...  }
$.each(data,function(key,value){
   $('#results-list').append("<span>"+ key +": " + value + "</span>")
});