Retrieve the properties of an object

Question

Retrieve the properties of an object

I have a JavaScript program where I retrieve values from a JSON file and store them in an array. However, when I attempt to access the elements of this array, it returns nothing.

Below is the function that pushes temperatures:

temperatures = []
get_info = (data) => {
    var data = JSON.parse(data)
    for(var i = 0; i < data['list'].length; i++){
        temperatures.push(String(data['list'][i]['main']['temp']))
    }
}

Here is how I fetch the data and call the function:

weather = (city_name) => {
var key = '.......';
var base_url = 'http://api.openweathermap.org/data/2.5/forecast?';
var url = base_url + 'appid=' + key + '&q=' + city_name + '&units=metric';
fetch(url)
    .then(response => response.text())
    .then(contents => get_info(contents))    
}

When logging temperatures, it shows an empty array [].

How can I correctly access the elements of the temperatures array?

javascript

Answer 1

Answer №1

It appears that your code is working perfectly fine. Just remember that the fetch operation is asynchronous, meaning that the data in the temperatures variable will only be accessible once the promise is resolved.

To verify if the temperatures variable contains the correct values, you can log it to the console after invoking the get_info method:

weather = (city_name) => {
    var key = '.......';
    var base_url = 'http://api.openweathermap.org/data/2.5/forecast?';
    var url = base_url + 'appid=' + key + '&q=' + city_name + '&units=metric';
    fetch(url)
        .then(response => response.text())
        .then(contents => {
            get_info(contents);

            console.log(temperatures); // --> Data available here!
        });    
};

On a related note, if you are aware that the API returns JSON data, you could simply use the json method of the response instead of converting the text response to JSON using JSON.parse:

temperatures = [];
get_info = (data) => {
    for(var i = 0; i < data['list'].length; i++){
        temperatures.push(String(data['list'][i]['main']['temp']))
    }
};

weather = (city_name) => {
    var key = '.......';
    var base_url = 'http://api.openweathermap.org/data/2.5/forecast?';
    var url = base_url + 'appid=' + key + '&q=' + city_name + '&units=metric';
    fetch(url)
        .then(response => response.json())
        .then(contents => {
            get_info(contents);

            console.log(temperatures); // --> Data available here!
        });    
};

Answer 2

It appears that your code is working perfectly fine. Just remember that the fetch operation is asynchronous, meaning that the data in the temperatures variable will only be accessible once the promise is resolved.

To verify if the temperatures variable contains the correct values, you can log it to the console after invoking the get_info method:

weather = (city_name) => {
    var key = '.......';
    var base_url = 'http://api.openweathermap.org/data/2.5/forecast?';
    var url = base_url + 'appid=' + key + '&q=' + city_name + '&units=metric';
    fetch(url)
        .then(response => response.text())
        .then(contents => {
            get_info(contents);

            console.log(temperatures); // --> Data available here!
        });    
};

On a related note, if you are aware that the API returns JSON data, you could simply use the json method of the response instead of converting the text response to JSON using JSON.parse:

temperatures = [];
get_info = (data) => {
    for(var i = 0; i < data['list'].length; i++){
        temperatures.push(String(data['list'][i]['main']['temp']))
    }
};

weather = (city_name) => {
    var key = '.......';
    var base_url = 'http://api.openweathermap.org/data/2.5/forecast?';
    var url = base_url + 'appid=' + key + '&q=' + city_name + '&units=metric';
    fetch(url)
        .then(response => response.json())
        .then(contents => {
            get_info(contents);

            console.log(temperatures); // --> Data available here!
        });    
};

Retrieve the properties of an object

Answer №1

Similar questions

Ways to dynamically update CSS properties (such as changing the color scheme throughout the entire application)

Saving $routeParam in a variable within a factory service in AngularJS Store

Using a single function to generate multiple instances of a table in JavaScript

The icon is not being displayed when the onHover event on the Material UI component is triggered

Achieving the Menu Hover Effect - step by step guide to recreating this stylish effect

modify the structure of an object according to specific conditions

Utilizing Regex to Authenticate a CAGE Code

The iconbar feature in the mobile menu is experiencing functionality issues

The AngularJS array data is not displaying correctly

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

What is the process for adding to a highly nested array in mongoose?

Removing all items with a specific ID and its related items in Javascript: How to achieve this recursively?

Is there a way for me to record the variable's name instead of its linked data?

Creating formGroups dynamically for each object in an array and then updating the values with the object data

Node.js and JavaScript promises are not pausing for the sequelize query to complete

When using the HTML5 input type time in Chrome and the value is set to 00:00:00, it may not be fully completed

Positioning of dropdown in Material UI select component

Tips for building a versatile fetch function that can be reused for various JSON formats within a React application

Playing back an Audio object using JavaScript

Colorbox scalePhotos function malfunctioning