将JSON响应中的值解析并显示为HTML

时间:2018-12-06 09:21:42

标签: javascript json geolocation openstreetmap nominatim

我正在尝试根据从HTML的Geolocation API获取的坐标来找出当前城市。在这里,我已经对坐标进行了硬编码,但是无法解析并获取当前城市。

我用于获取城市名称的API是Nominatim。 我不确定代码在哪里出错。

   $('#table-clipboard').hide();

   $('#copy').on('click', function() {

      var el = document.getElementById('table-clipboard');
      // alert(el);

      var body = document.body, range, sel;
      if (document.createRange && window.getSelection) {
        range = document.createRange();
        sel = window.getSelection();
        sel.removeAllRanges();
        try {
          range.selectNodeContents(el);
          sel.addRange(range);
          document.execCommand("copy");
        } catch (e) {
          range.selectNode(el);
          sel.addRange(range);
          document.execCommand("copy");
        }
      } else if (body.createTextRange) {
        range = body.createTextRange();
        range.moveToElementText(el);
        range.select();
        document.execCommand("copy");
      }
    });

1 个答案:

答案 0 :(得分:2)

您似乎不熟悉AJAX调用的异步性质。 您不能仅仅发布AJAX调用,然后期望<img t-if="company.logo_footer" t-att-src="image_data_uri(company.logo_footer)" style="max-height: 30px;"/> 对象拥有全部。您需要为事件XMLHttpRequest定义一个回调函数,所有动作都应在其中发生。

onreadystatechange

BTW:比起旧的XMLHttpRequest,即const url = "https://nominatim.openstreetmap.org/reverse?format=json&lat=12.93&lon=80.17&zoom=18&addressdetails=1"; const req = new XMLHttpRequest(); req.responseType = "json"; req.open("GET", url, true); req.send(); req.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var jsonResponse = this.response; var newElement2 = document.createElement("div"); newElement2.innerHTML = jsonResponse.address.country; document.body.appendChild(newElement2); } }

,有更多现代方法来调用'AJAX'