Home > OS >  How to show JSON on a page and also read a particular value from it
How to show JSON on a page and also read a particular value from it

Time:01-13

I would like my code to get JSON and read the temperature value for London.

Any help would be very appreciated.

However I have two issues, the data fetched shows this: [object Object]

  1. How to repair it?
  2. How to make it fetch the temperature value for London, which is in main and temp.

Maybe like this:

data.["main"].temp

It's a Kelvin temperature for London, 277.21.

My JSON:

{
    "coord": { "lon": -0.1257, "lat": 51.5085 },
    "weather": [{ "id": 800, "main": "Clear", "description": "clear sky", "icon": "01n" }],
    "base": "stations",
    "main": { "temp": 277.21, "feels_like": 275.36, "temp_min": 274.4, "temp_max": 279.13, "pressure": 1042, "humidity": 93 },
    "visibility": 9000,
    "wind": { "speed": 2.06, "deg": 230 },
    "clouds": { "all": 9 },
    "dt": 1642014889,
    "sys": { "type": 2, "id": 2019646, "country": "GB", "sunrise": 1641974505, "sunset": 1642004119 },
    "timezone": 0,
    "id": 2643743,
    "name": "London",
    "cod": 200
}

My bad code:

 $.ajax({
            url: "https://api.openweathermap.org/data/2.5/weather?q=London&appid=a7a01852c805157a4c8334e87e39c75c",
            cache: false,
            dataType: "json",
            complete: function(data) {
               

                tempLondon = data;
             
                 $('#tempLondon').append('The temperature is '   tempLondon );
                 console.log(tempLondon);
            }
        });

CodePudding user response:

When you convert an object to a string, for example by trying to insert it directly into markup, it gets turned into '[object Object]'. While this is certainly unintuitive, you have to remember that objects can contain circular references so it may not be possible to convert them to strings.

However, you can instead use JSON.stringify to convert your object to a JSON string and print that to the console instead:

console.log(JSON.stringify(tempLondon, null, '\t'));

Because your object is constructed from a JSON string in the first place (this happens behind the scenes in jQuery's $.ajax function), it can't contain any circular references so there won't be any problem constructing a JSON string from it.

If you want to retrieve the temperature itself, just use dot notation:

console.log(tempLondon.main.temp);

CodePudding user response:

try this

$.ajax({
type: 'GET',
url: "https://api.openweathermap.org/data/2.5/weather?q=London&appid=a7a01852c805157a4c8334e87e39c75c",
dataType: "json",
success: function(data) {

console.log(JSON.stringify(data));
$('#tempLondon').html('The temperature is '   data.main.temp );
 
},
error: function (error) {
console.log(JSON.stringify(error));
}     
  });
 

in the future don't put dot and brackets together.

it is valid

 data.main.temp
//or 
data["main"].temp

it is NOT valid

data.["main"].temp
  •  Tags:  
  • Related