MIt JS die JSON-Daten einer PHP-Seite laden

danielt · 23. Sep. 2014

Hallo zusammen

Ich habe JSON Daten auf einer PHP-Seite

Nun möchte ich mithilfe JAvascript die Auslesen und in ein HTML Dokument repräsentieren.

Hätte jemand eine Idee wie das klappen sollte?

kkapsner · 23. Sep. 2014

Mittels AJAX die Datei laden und mit JSON.parse() das JSON parsen. Wie die Darstellung im HTML realisiert wird, ist dann stark von der genauen Datenstruktur abhängig.

danielt · 23. Sep. 2014

hmmm das hilft mir nicht viel weiter da ich mich damit nicht viel auskenne .. könnte mir jemand genauere hinweise geben ??? in google finde ich nichts das mir gut hilft ...

Also es sieht so aus:

HTML-Datei:

Code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Weather</title>
    <link href="styling.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script src="main.js" type="text/javascript"></script>
</head>
<body class="background">

<div class="header">
    <h1>
        Weather
    </h1>
</div>

<div class="content">

</div>

</body>
</html>

PHP-Datei

Code:

<?php
/*
 * Datum: 22.09.2014
 */
function getJson () {
$json = file_get_contents("weather.json");
echo $json;
}
getJson();
?>

JSON-Datei

Code:

{
    "message": "accurate",
    "cod": "200",
    "count": 1,
    "list": [
        {
            "id": 2658377,
            "name": "Thun",
            "coord": {
                "lon": 7.62166,
                "lat": 46.751179
            },
            "main": {
                "temp": 17.4,
                "pressure": 1013,
                "humidity": 77,
                "temp_min": 13.89,
                "temp_max": 21.67
            },
            "dt": 1410942629,
            "wind": {
                "speed": 2.1,
                "deg": 120,
                "var_beg": 90,
                "var_end": 150
            },
            "sys": {
                "country": "CH"
            },
            "rain": {
                "1h": 9.14
            },
            "clouds": {
                "all": 40
            },
            "weather": [
                {
                    "id": 502,
                    "main": "Rain",
                    "description": "heavy intensity rain",
                    "icon": "10d"
                },
                {
                    "id": 701,
                    "main": "Mist",
                    "description": "mist",
                    "icon": "50d"
                }
            ]
        }
    ]
}

Nun fehlt mir das Javascript :S
habe wenig erfahrung damit und weiss nicht wie ich das hinkriegen soll

kkapsner · 24. Sep. 2014

jQuery hast du ja schon am Start. Dann kannst du das gleich verwenden: https://api.jquery.com/jQuery.get/
Das kann direkt schon das JSON parsen und dir dann ein JS-Objekt liefern.

Wenn du damit hängst, zeig' hier einfach den Code, mit dem du rumgespielt hast.

PS: warum hast du da einen PHP-Wrapper, wenn du das JSON schon als Datei auf dem Server liegen hast. Du kannst dann die doch gleich runterladen.

MIt JS die JSON-Daten einer PHP-Seite laden

danielt

New member

kkapsner

Super Moderator

danielt

New member

kkapsner

Super Moderator