我正在处理django项目,并希望能够访问JSON文件,以便对从JSON到模板的数据进行地理定位。
JSON驻留在 project / static / test / data.js
它具有以下数据:
var json= {"count":6,"next":null,"previous":null,"results":[{"title":"Name1","date":"2018-10-02","products":"","categories":"","client_id":{"id":500,"client_id":"3000-3333","title":"Name1","lat":"40.2323","lng":"34.232323","address":"address1","address_no":"","region":"region1","tk":"34343","municipality":"municipality1","department":"department1","description":null,"categories":null,"phone":"2323232332"},"pcategory":"","product_team":""},{"title":Name2....
我模板中的脚本位于 project / templates / test / test_template_json.html
它具有以下脚本:
<script>
// Initialize and add the map
function initMap() {
var map = new google.maps.Map(
document.getElementById('map'), {
zoom:8,
center: new google.maps.LatLng(37.232323,23.72752323239)
});
//json is the whole document and results is the list with the json objects
for (var x in json.results){
var client=json.results[x].client_id;
var location =new google.maps.LatLng(client.lat,client.lng);
var marker=new google.maps.Marker({
position:location,
map:map});
}
}
</script>
如果我使用变量:var json = {“ count”:6,“ next”:null,....};
在我用于访问json的data.js文件中,我没有任何问题。
但是我想不声明var json并仍然能够访问test_template_json.html文件中的json。
换句话说,如果格式为,我该如何访问我的json:
{"count":6,"next":null,"previous":null,"results":[{"title":...
我该怎么办?有什么想法吗?
答案 0 :(得分:0)
最后,经过一段时间的研究,我想出了一个可行的解决方案。以下代码片段均使用Javascript
。步骤1)定义一个XMLHttpRequest对象,并将指向json的路径传递给open()函数。
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
// xobj.open('GET', '/static/test/download2.json', true);
xobj.open('GET', 'path/path..../path', true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
步骤2)使用JSON.parse(response)
解析来自loadJSON的响应,因此现在您可以通过javascript变量(var actual_JSON
)访问json数据。
loadJSON(function(response) {
// Parse JSON string into object
var actual_JSON = JSON.parse(response);
for (var x in actual_JSON){
var client=actual_JSON[x].client_id;
var location =new google.maps.LatLng(client.lat,client.lng);
var marker=new google.maps.Marker({
position:location,
map:map});
}
});
然后,您可以使用for循环轻松访问数据。
有关加载json文件的有用文章可以在这里找到:https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript