Create a dataframe by reading a csv and show this in template using ajax
views.py
class RunDemBtn(View):
def post(self, request):
#'tableview/static/csv/20_Startups.csv' is the django
# directory where csv file exist.
# Manipulate DataFrame using to_html() function
obj_find_elevation=FindElevation()
obj_find_elevation.main_fun()
# logger.info(request.status)
logger.info("end FindElevation")
obj_find_elev_risk=FindElevRisk()
obj_find_elev_risk.main_fun()
logger.info("I am in RunDemBtn view")
elev_data_filepath = settings.MEDIA_ROOT+'/elev_risk_data/'+"elevation_risk_send_to_arcgis.csv"
if os.path.isfile(elev_data_filepath):
df = pd.read_csv(elev_data_filepath)
else:
df=None
column_count = df.shape[1]
column_names = df.columns.tolist()
logger.info(column_names)
json_records = df.reset_index().to_json(orient ='records')
data = []
data = json.loads(json_records)
context = {'d': data, 'column':column_names,'column_count':column_count}
logger.info("test point")
return JsonResponse(context)
.js:
$('#run-dem-btn').click(function(e){
e.preventDefault();
console.log('click');
var this_context = $(this);
var csrftoken = getCookie('csrftoken');
var formData = {"status": "ok"};
$.ajax({
url: '/run-dem-btn/',
type: 'POST',
data: formData,
enctype: 'multipart/form-data',
// contentType: false,
// processData: false,
headers: {
'X-CSRFToken': csrftoken
},
beforeSend: function(){
console.log("before send");
},
success: function (response) {
// console.clear();
console.log("success")
console.log(response)
var html="";
var csv_data = response.d;
var column_name=response.column;
var column_len=response.column_count;
console.log("-----------------");
const my_Obj = {csv_data};
console.log(my_Obj)
console.log(Object.keys(my_Obj));
console.log(Object.values(my_Obj));
html+=""
for(var i=0;i"+column_name[i]+""
}
html+=" "
csv_data.forEach(function (arrayItem) {
// console.log(arrayItem.Head_of_the_Household_s_Name);
html+=""
for(var i=0;i"+ arrayItem[column_name[i]]+""
}
html+=" "
// html += '
'
// html += '
'
// html += '
'
});
$('#table-data').html(html);
// toastr.info('Figure creation completed!');
},
error: function(err) {
console.log("err=");
console.log(err);
// toastr.error('Error! Incorrect training data. Please carefully check the sample data format and upload new data.')
},
complete: function(res, err){
console.log("res err")
console.log(res, err);
console.group(typeof res.responseText);
// localStorage.setItem("analysis_response", JSON.stringify(res.responseText))
// console.log("analysis_response")
}
});
});
.html:
Comments
Post a Comment