如何在不声明变量的情况下访问JSON文件

时间:2018-10-22 07:57:26

标签: javascript json parsing geolocation

我正在处理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":...

我该怎么办?有什么想法吗?

1 个答案:

答案 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