Append Json object from database to HTML

Question

I am trying to create a one page app that searches weather by a zip code and displays the results. I am accessing a weather database, but I am stuck on how to append a specific json object to my dom

Incomplete javascript

 $(function() {
$("#getzip").submit(function() {
var zip_data = $(this).serialize();
    $.getJSON("get_weather.php",zip_data, function(data); {
    ("#output").append(current_obervation.temperature_string); // this is what I want it to do tho obviously incorrect


  });
 });
})

HTML

<h1>Weather</h1>
<hr />
<form method="get" action="get_weather.php" id="getzip">
<p>
  <label for="zip">ZIP:</label>
  <input type="text" name="zip" id="zip">
  <input type="submit" name="button" id="button" value="Submit" >
</p>

<pre id="output">
</pre>

PHP

<?php
 $zip = isset($_GET['zip']) ? $_GET['zip'] : $_POST['zip'];
 $weather_data = file_get_contents("http://api.wunderground.com/api/6d125bc5977276ee/conditions/q/{$zip}.json");
echo $weather_data 
?>

And a small sample of what the database returns. How would I pinpoint temperature and append it to the dom?

current_observation": {
"image": {
  "url": "http://icons-ak.wxug.com/graphics/wu2/logo_130x80.png",
  "title": "Weather Underground",
  "link": "http://www.wunderground.com"
   "temperature_string": "53.5 F (11.9 C)",
  },
}

Anatoliy Kim · Accepted Answer · 2014-04-12 06:11:10Z

1

You need to add "output" to your html.

<div id="output"></div>

$(function() {
    $("#getzip").submit(function() {
        var zip_data = $(this).serialize();
        $.getJSON("get_weather.php",zip_data, function(data); {
             $('#output').html(data.current_observation.temperature_string);
        });
    });  
})

answered Apr 12, 2014 at 6:11

Anatoliy Kim

7564 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nope Over a year ago

it was there, it just was not formatted to correctly in my post

Anatoliy Kim Over a year ago

Change from 'pre' to 'div'.

Anatoliy Kim Over a year ago

Also, use console.log (data) and see in the console what does your get_weather.php returns to your script.

Anatoliy Kim Over a year ago

And, finally, you have ';' after 'function (data)'. Since I copied it from your script - I also have it in my answer. Remove it.

Sridhar R · Accepted Answer · 2014-04-12 06:08:12Z

0

Try this way

$('#output').append(data.current_observation.temperature_string)

DEMO

answered Apr 12, 2014 at 6:08

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Comments

Mir Gulam Sarwar · Accepted Answer · 2014-04-12 06:26:51Z

0

Here is what you actually need.Demo

$('#output').append(data.current_observation.image.temperature_string)

answered Apr 12, 2014 at 6:26

Mir Gulam Sarwar

2,6482 gold badges27 silver badges40 bronze badges

Comments

Sachin Gadagi · Accepted Answer · 2014-04-12 06:32:16Z

0

 $.get( "get_weather.php", function( data ) {       
 $( "#output" ).append( "Temperature: " + data.current_observation.temperature_string    )},"json" );

// mentioned "json" as 3rd parameter as it emits json response

Reference from last example here .

answered Apr 12, 2014 at 6:32

Sachin Gadagi

7495 silver badges14 bronze badges

Comments

nope · Accepted Answer · 2014-04-12 07:00:16Z

0

Thanks for all the help but I discovered this way works best

$(function() {
$("#getzip").submit(function() {
  var zip_data = $(this).serialize();
  $.getJSON("get_weather.php", zip_data, function(data) {
    $("#output").empty();
    $('#output').append(JSON.stringify( data.current_observation.temperature_string, " "));                   
  });
  return false;
 });
});

answered Apr 12, 2014 at 7:00

nope

1771 gold badge4 silver badges16 bronze badges

Collectives™ on Stack Overflow

Append Json object from database to HTML

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related