Как разобрать объект jsonify в python и отобразить в html?

Question

У меня есть приложение фляги, которое возвращает вывод функции jsonify, но вывод, отображаемый в html, не очень приятный.Я теперь, чтобы проанализировать этот вывод и изменить его, прежде чем вернуть его в HTML.Я попытался перебрать вывод json, но это не позволило мне сделать это.Как я могу это сделать?

Сначала приведу вывод функции jsonify на моей веб-странице.

Прогноз: ржавчина яблочного кедра, 99.6459424495697, здоровый Bell_Pepper, здоровая черника 0,2868120325729251, здоровая черника, 0,05757397739216685

Я хочу что-то вроде этого

Предсказания :

Яблочная кедровая ржавчина: 99.6459424495697

Белл_Пеппер здоров: 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)})

Inmain.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 является допустимым объектом json, переданным в jasonify(result), вам нужно будет выполнить итерацию по объекту данных в main.js и программно отобразить пары key:value. Как то так:

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