Fetching data from API and creating an object

Question

I have an array which contains 5 cities and I want weather details of these five cities I applied loop for long and lat I got but I got stuck that how would I apply long and lat to get the details about the cities to create object e.g. cities={London:{temp:xyz}}.

var cities = {
  Phoenix: {},
  ...
};

function getData() {
  var city = ['London', 'Phoenix', 'Chicago', 'Texas'];
  for (var i = 0; i < city.length; i++) {
    var api = 'http://api.openweathermap.org/geo/1.0/direct?q=' + city[i] + '&appid=4dad41fdcc37b40dd07e3e1638f24b81';
    //  var api = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat[i]+'&lon='+lon[i]+'&appid=4dad41fdcc37b40dd07e3e1638f24b81'
    fetch(api).then(function(response) {
      var data = response.json();
      return data;
    }).then(function(data) {
      cities.Phoenix.temp = Math.floor(data.main.temp);
    });
  }
}

getData();

I'm not sure I understand the question. You want to make an additional api call? And add that key to the cities object? Sounds doable — formula1, Feb 15 '22 at 06:26
`cities.Phoenix.temp` needs to be the `city[i]`, https://stackoverflow.com/questions/4968406/javascript-property-access-dot-notation-vs-brackets but you need to deal with the infamous for loop. https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — epascarello, Feb 15 '22 at 06:28

score 1 · Answer 1 · answered Feb 15 '22 at 06:37

You need to use bracket notation to get the reference to the city in your object. cities[city[i]].temp. The problem you will have is the infamous for loop where the i will be different because of the asynchronous call.

Personally I would make it a function and call it. Map() simplifies the loop.

var cityNames = ['London', 'Phoenix', 'Chicago', 'Texas'];
var cities = {};

function fetchCity(city) {
  var api = '//example.com/q=' + encodeURIComponent(city);
  return fetch(api)
    .then(function(response){
      return response.json();
    }).then(function (data) {
       cities[city] = cities[city] || {};
       cities[city].temp = Math.floor(data.main.temp);
       return data;
    });
}

function getData(callback) {
  var fetchCalls = citiesNames.map(fetchCity);
  Promise.all(fetchCalls).then((values) => {
    callback(values);
  });
}

getData(function (values) { console.log('All Loaded', values); });

Fetching data from API and creating an object

1 Answers1