javascript - 我无法将我的谷歌“本地状态地址”变量解析为新闻 api url

Question

已经通过反向地理编码获取用户地址，但不知何故，“状态”变量无法解析为新闻 api url。getWeatherData 函数运行良好，因为它是从某人“研究”和“启发”而来的。但是对于 getNewsData 函数，我无法将地址变量解析为 url。请帮助各位。

  $(document).ready(function getWeather() {

  var lat;
  var lon;
  var state;
  var timevar;


  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);


  } else {
    alert("Geolocation services are not supported by your web browser.");
  }

  function success(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;

    timevar = new Date().toISOString().slice(0,10);
    // var state;

    var reversegeocodingapi = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lon+"&key=mykey";
    $.getJSON(reversegeocodingapi, function(place) {
      for (var i=0; i<place.results[0].address_components.length; i++) {
        if (place.results[0].address_components[i].types[0]==="locality") {
          var city = place.results[0].address_components[i].long_name;
          $("#city").html(city.toUpperCase());
        }
        if (place.results[0].address_components[i].types[0]==="administrative_area_level_1") {
          var state = place.results[0].address_components[i].long_name;
          $("#state").html(state.toUpperCase());
          }
      }
    }); //end getJSON
    getWeatherData(lat, lon);
    getNewsData(state,timevar);
  } //end success


  function error() {
    var alerted = localStorage.getItem('alerted') || '';
    if (alerted != 'yes') {
     alert("Sorry, I don't know where you are, abort local news/weather service.");
     localStorage.setItem('alerted','yes');
    }

  }

  function getWeatherData(latitude, longitude) {
    var weatherapiurl = "https://api.forecast.io/forecast/mykey/"+lat+","+lon+"?callback=?"
    $.getJSON(weatherapiurl, function(weatherdata) {
      var tempf = Math.round(weatherdata.currently.temperature);
      $("#temp").html(tempf + "°");
      var tempc = Math.round(((weatherdata.currently.temperature)-32)/(9/5));
      var feelslikef = Math.round(weatherdata.currently.apparentTemperature);
      $("#feels-like").html("Feels Like: " + feelslikef + "°F");
      var feelslikec =  
      ...........
      ...........
      });//end f click
    }); //end getJSON
  }; //end getWeatherData



  function getNewsData(localstate,date0,date1) {



    // timevar = new Date().toISOString().slice(0,10);
    var url = 'https://newsapi.org/v2/everything?q='+state+'&from='+timevar+'&to='+timevar+'&sortBy=popularity&apiKey=mykey/'+'?callback=?';
    // var url = 'https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=mykey';

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
        if ( this.readyState == 4 && this.status == 200 ) {
            var data = JSON.parse(xhttp.responseText).articles;

            console.log(data);

            var articles = data.map(mapToArticle);
            var contentDiv = document.getElementById('content');

            contentDiv.innerHTML = createTemplate(articles);
        }
    }

    xhttp.open("GET", url, true);
    xhttp.send();

    function mapToArticle(item) {
        return {
            url: item.url,
            title: item.title,
            author: item.author,
            date: item.publishedAt,
            img: item.urlToImage ? item.urlToImage : null,
            description: item.description
        };
    }

    function formatTime(timestr) {
      return timestr.substr(0, 10);
    }

    function createTemplate(articles) {
        return articles.reduce(function(tmpl, article) {
            tmpl += `
            <article>
                <h2><a class="article-header" href="${article.url}">${article.title}</a></h2>
                <div class="row">
                    <div class="col-md-4">
                        <img class="img-fluid rounded mb-3" src="${article.img}"  />
                    </div>
                    <div class="col-md-8">
                        <p class="date">${formatTime(article.date)}</p>
                        <p class="author">by ${article.author}</p>
                        <div>${article.description}</div>
                        <a class="btn-more" href="${article.url}">read more</a>
                    </div>
                </div>
            </article>
            `;

            return tmpl;
        }, '');
    }
  }




}); //end ready

标签： javascripthtml

Answer 1

getJSON是一个异步调用，但您试图在回调之外使用它的结果，这意味着您正在尝试在任何分配给它之前访问状态变量。只需将您的函数调用移到回调中，您就应该是对的。

$.getJSON(reversegeocodingapi, function(place) {
  for (var i=0; i<place.results[0].address_components.length; i++) {
    if (place.results[0].address_components[i].types[0]==="locality") {
      var city = place.results[0].address_components[i].long_name;
      $("#city").html(city.toUpperCase());
    }
    if (place.results[0].address_components[i].types[0]==="administrative_area_level_1") {
      var state = place.results[0].address_components[i].long_name;
      $("#state").html(state.toUpperCase());
      }
  }
  getWeatherData(lat, lon);
  getNewsData(state,timevar)
}); //end getJSON