Как разобрать объект jsonify в python и отобразить в html?
У меня есть фляжное приложение, которое возвращает вывод из функции jsonify, но вывод, отображаемый в html, некрасивый. Теперь я должен проанализировать этот вывод и изменить его, прежде чем возвращать его в html. Я попытался перебрать вывод json, но он не позволяет мне этого сделать. Как я могу это сделать?
Сначала это вывод функции jsonify на моей веб-странице.
Prediction: Apple Cedar rust,99.6459424495697,Bell_Pepper healthy,0.2868120325729251,Blueberry healthy,0.05757397739216685
я хочу что-то вроде этого
Predictions:
Apple Cedar rust: 99.6459424495697
Bell_Pepper healthy: 0.2868120325729251
Blueberry healthy: 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.info('Success!');
},
});
Я уже написал это в своем вопросе выше. Но все же вот оно Prediction: Apple Cedar rust,99.6459424495697,Bell_Pepper healthy,0.2868120325729251,Blueberry healthy,0.05757397739216685. Вот репозиторий github для скрипта app.py github.com/upendrak/Disease_Predictor/blob/master/app.py. Вот ссылка на выходное изображение - i.postimg.cc/L5pzK29m/final-image.png
Ответы 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>")
});
Вы можете вернуть строку HTML, которую можно использовать в качестве тела элемента div #result:
В вашем 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.info('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.info('Success!');
},
});
Я попытался включить первую строку (result = re.sub('^Prediction:', '', model_predict(file_path, model)).split(',')) для начала в свой файл app.py, но получил ошибку TypeError: expected string or bytes-like object.
@upendra Можете ли вы уточнить, что такое тип result? Можешь поставить print(result) звонок ниже result = model_predict(file_path, model) и выложить результат?
Вот это Тип <class 'list'> Результат вывода [('Apple Cedar rust', 99.6459424495697), ('Bell_Pepper healthy', 0.2868120325729251), ('Blueberry healthy', 0.05757397739216685), ('Raspberry healthy', 0.006377929094014689), ('Cherry(Sour) healthy', 0.0007768640898575541)]
Спасибо. Нужно ли мне что-то кроме двух файлов выше (app.py и main.js)? Я не верну результат. Я просто получаю это Prediction: [object Object]
@upendra Приведенный выше код — это все, что вам нужно изменить. Просто верните flask.jsonify({'html':'\n'.join(f'<p>{a}: {b}</p>' for a, b in result)}) из upload в app.py и поместите $('#result').append(data.html) в обработчик successajax. Убедитесь, что вы используете data.html, а не data, так как последний является объектом (что объясняет [object Object]), а первый — желаемым результатом строки HTML. Пожалуйста, дайте мне знать, если это работает.
Давайте продолжить обсуждение в чате.
Можете ли вы опубликовать содержимое
resultизresult = model_predict(file_path, model)?