最近做python flask编程,遇到要将后台python文件里产生的dataframe数据传到javascript中一直传不成功的问题,试了各种方法,都没传成功,由于初学,就想用点通俗易懂的方法,最后自己设计了一个很笨的在javascript中分割字符串的方法,通俗易懂。^-^
我要传的data_new_tohtml是dataframe数据,通过使用python文件中的代码
return render_template('display.html', data_new_map=json.dumps(data_new_tohtml.to_dict('records')))
向javascript传递数据,着实很简单,但是在javascript中取数据的时候就遇到问题了,使用
var js_object = eval('{{data_new_map|tojson|safe}}');
一直取不出来,不能得到js对象,不过通过如下命令可以得到dataframe数据转换成的字符串
var js_gpsdate = '{{data_new_map|tojson|safe}}';
所以再通过js_gpsdate.split()进行各种字符串分割,得到自己想要的数据。
贴主要代码:
1、 python后台代码:
import pandas as pd
import json
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
data_new_tohtml=pd.DataFrame(
data={
'longitude':[114.513,114.513,114.513,114.51303],
'latitude':[33.026,33.02676,33.026,33.027229]
})#测试数据,乱写的数据
data_new_tohtml = data_new_tohtml[['longitude','latitude']]
return render_template('display.html', data_new_map=json.dumps(data_new_tohtml.to_dict('records')))
2、javascript代码:
<script type="text/javascript">
var js_gpsdata_new = '{{data_new_map|tojson|safe}}';
console.log(js_gpsdata_new);
//通过字符串分割的方法取出字符串中的GPS数据
var strs1= new Array(); //定义一数组
var strs2= new Array(); //定义一数组
var strs3= new Array(); //定义一数组
var strs4= new Array(); //定义一数组
var gpslonglat= new Array(); //存储GPS数组
var gpslong= new Array(); //存储GPS数组
var gpslat= new Array(); //存储GPS数组
var numlong = 0;
strs1=js_gpsdata_new.split("}, {"); //字符分割
for (i=0;i<strs1.length ;i++ ){
strs2=strs1[i].split(", "); //字符分割
for (j=0;j<strs2.length ;j++ ){
strs3=strs2[j].split(": "); //字符分割
if (i == strs1.length-1){
strs4=strs3[1].split("}"); //字符分割
gpslonglat[numlong] = parseFloat(strs4[0]);
}else{
gpslonglat[numlong] = parseFloat(strs3[1]);
}
numlong = numlong + 1;
}
}
var numlo = 0;
var numla = 0;
for (k=0;k<gpslonglat.length ;k++ ){
if (k%2 ==0){
gpslong[numlo] = gpslonglat[k];
numlo = numlo + 1;
}
else{
gpslat[numla] = gpslonglat[k];
numla = numla + 1;
}
}
console.log(gpslong[0]);
console.log(gpslat[0]);
</script>
完毕!本文为编程过程中的方法记录,不是最优方法,实在走不通的时候可参考本文方法。