getJSON overrides HTML background color

Question

I am creating an HTML page which uses jQuery, iFrames and have simple CSS. When I run a jQuery script against a json file from openweathermap.org it overrides the HTML background color set in place, as well as any iframes. Any suggestions?

<style>
    body {
        background-color: #ff5000;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div id = "weather"></div>
<script>
    $( "weather" ).ready(function(){ 
        $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=Castlebar,ie&appid=44db6a862fba0b067b1930da0d769e98");
        document.write('hello');
        console.log('works')
    });

</script>

Possible duplicate of [Why is document.write considered a "bad practice"?](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) — Professor Allman, Feb 17 '16 at 16:09
[DW executed after the page has finished loading will overwrite the page, or write a new page, or not work](http://stackoverflow.com/a/802943/2033671) — Professor Allman, Feb 17 '16 at 16:11
Please find out what does document.write - http://www.w3schools.com/jsref/met_doc_write.asp — Przemek, Feb 17 '16 at 16:12

score 1 · Accepted Answer · answered Feb 17 '16 at 17:37

A JSON RESTful request should not be changing your background...

You need a callback function for your request so that you can process the data.

$('#weather').ready(function(request) {
  $.getJSON('http://api.openweathermap.org/data/2.5/weather', {
    q     : 'Castlebar,ie',
    appid : '44db6a862fba0b067b1930da0d769e98'
  }, function(data, textStatus, jqXHR) {
    var city    = data.name;
    var country = data.sys.country;
    var weather = data.weather[0].description;
    
    // Prints: "Current weather for Castlebar, IE: light rain"
    $('#weather').html('Current weather for ' + city + ', ' + country + ': ' + weather);
  });
});

body {
  background-color: #ff5000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="weather"></div>

JSON Response

{
  "coord": {
    "lon": -9.3,
    "lat": 53.85
  },
  "weather": [
    {
      "id": 500,
      "main": "Rain",
      "description": "light rain",
      "icon": "10d"
    }
  ],
  "base": "cmc stations",
  "main": {
    "temp": 278.229,
    "pressure": 1016.87,
    "humidity": 100,
    "temp_min": 278.229,
    "temp_max": 278.229,
    "sea_level": 1024.44,
    "grnd_level": 1016.87
  },
  "wind": {
    "speed": 5.27,
    "deg": 231.001
  },
  "rain": {
    "3h": 0.2
  },
  "clouds": {
    "all": 76
  },
  "dt": 1455729355,
  "sys": {
    "message": 0.0024,
    "country": "IE",
    "sunrise": 1455695530,
    "sunset": 1455731463
  },
  "id": 2965654,
  "name": "Castlebar",
  "cod": 200
}

Bjonnfesk · Answer 2 · 2016-02-17T19:56:54.380

I think what you want to do is to change the HTML of #weather, not rewrite the entire document. You can do this like this:

$('#weather').html("INSERT YOUR DESIRED CONTENT HERE");

So, you parse the JSON from getJSON(), extract the interesting information, and insert it into #weather with the above line of code. I have put together a JSFiddle for you with example code. I had to hardcode the json in there, because JSFiddle would not let me get the JSON from your link since it is not an HTTPS link, but simply replace var json = *JSON* in my Fiddle with var json = $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=Castlebar,ie&appid=44db6a862fba0b067b1930da0d769e98"); on your own page and it should work.

https://jsfiddle.net/k87yuats/

Edit: I forgot to mention that on your own page, you must use .done() feature of getJson() to make sure that the AJAX request completes before attempting to parse the JSON data: http://api.jquery.com/jquery.getjson/

getJSON overrides HTML background color

2 Answers2

JSON Response