Добавить объект Json из базы данных в HTML

Question

Добавить объект Json из базы данных в HTML

0

Я пытаюсь создать одностраничное приложение, которое ищет погоду по почтовому индексу и отображает результаты. Я получаю доступ к базе данных погоды, но я зациклился на том, как добавить конкретный объект json в мой дом

Неполный 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 
?>

И небольшой пример того, что возвращает база данных. Как бы точно определить температуру и добавить ее в дом?

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)",
  },
}

nope 12 апр. 2014, в 08:59

Источник

1

отправить правильный JSON
Sridhar R 12 апр. 2014, в 06:02

Теги:

php

jquery

html

json

5 ответов

1

Вам нужно добавить "выход" в свой 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);
        });
    });  
})

Toly 12 апр. 2014, в 05:01

0

это было там, просто не было правильно отформатировано в моем посте
nope 12 апр. 2014, в 06:29
0

Измените «pre» на «div».
Toly 12 апр. 2014, в 11:27
0

Также используйте console.log (data) и посмотрите в консоли, что ваш get_weather.php возвращает в ваш скрипт.
Toly 12 апр. 2014, в 11:28
1

И, наконец, у вас есть ';' после «функции (данных)». Так как я скопировал это из твоего сценария - у меня это тоже есть в моем ответе. Убери это.
Toly 12 апр. 2014, в 11:28

Показать ещё 2 комментария

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

Ссылка из последнего примера здесь.

Sachin Gadagi 12 апр. 2014, в 05:21

0

Вот что вам нужно. демонстрация

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

Mir Gulam Sarwar 12 апр. 2014, в 03:53

0

Попробуйте этот путь

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

DEMO

Sridhar R 12 апр. 2014, в 03:36

Ещё вопросы

это было там, просто не было правильно отформатировано в моем посте
Также используйте console.log (data) и посмотрите в консоли, что ваш get_weather.php возвращает в ваш скрипт.
И, наконец, у вас есть ';' после «функции (данных)». Так как я скопировал это из твоего сценария - у меня это тоже есть в моем ответе. Убери это.

nope · Accepted Answer · 2014-04-12T05-39-00.000Z

Спасибо за всю помощь, но я обнаружил, что этот способ работает лучше всего

$(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;
 });
});