Home/ Questions/Q 7985869
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T11:40:57+00:00

I am brand new to actually using an API, getting the JSON data and

  • 0

I am brand new to actually using an API, getting the JSON data and throwing it in to an actually HTML file and making the results look pretty.

I am good with HTML/CSS/jQuery. But not this in depth with jQuery it seems (I can do the basics)

This is an example of the JSON data I am getting back from Weather Underground’s API

    "current_observation": {
    "image": {
    "url":"http://icons-ak.wxug.com/graphics/wu2/logo_130x80.png",
    "title":"Weather Underground",
    "link":"http://www.wunderground.com"
    },
    "display_location": {
    "full":"Bowling Green, KY",
    "city":"Bowling Green",
    "state":"KY",
    "state_name":"Kentucky",
    "country":"US",
    "country_iso3166":"US",
    "zip":"42101",
    "latitude":"37.02899933",
    "longitude":"-86.46366119",
    "elevation":"154.00000000"
    }

I can see from this that display_location is inside of current_observation.

I want to pull out and display full as an h1 on my website (I actually want to do more info, but I feel like after I get this down I can handle the rest.)

So here is what I have currently:

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <body>
        <section id="area"></section>
    </body>
    <script type="text/javascript">
        $().ready(function(){ 
            $.getJSON("http://api.wunderground.com/api/[MY API KEY]/conditions/q/autoip.json",
            function(data){
                $.each(data){
                    content = '<h1>' + json.current_observation.display_location.full + '</h1>';
                    $(content).appendTo("#area");
                 });
              });
           });
    </script>
</html>

It does not work :-/

Any help is great.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Look at this:

    content = '<h1>' + json.current_observation.display_location.full + '</h1>';

    What does json refer to ?? Also $.each(data){ is invalid syntax. See docs. Your each loop should probably look like

    $.each(data, function(i, json) {
    content = '<h1>' + json.current_observation.display_location.full + '</h1>';
    $(content).appendTo("#area");
});

    which will work if the data returned is an array of objects like that which is included in the question. You should console.log(data) to see its form.. you may be able to eliminate the each loop and just use

    content = '<h1>' + data.current_observation.display_location.full + '</h1>';
    • 0