[AJAX] Mettre des données issue d'un json sous forme table

Version imprimable

bonjour je test le javascript, je voudrai savoir comment enregistrer les données issue du json dans un fichier temporaire a intervalle régulier disons toute les heures, et ensuite mettre en forme les données qui m'interesse dans un tableau en html voici le code pour l'instant je récupérer bien les données.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="">
 
    <head>
        <meta charset="UTF-8">
        <title>App LM</title>
        <meta name="Author" content="" />
    </head>
 
    <body>
        <script type="application/javascript">
            var xhr = new XMLHttpRequest();
            try{
                xhr.open('GET','http://api.openweathermap.org/data/2.5/weather?q=London,uk',false);
                xhr.send(null);
                if(xhr.status==200)
                    var list =xhr.responseText;
                    document.write(list);
            }catch(e){
                document.write(e);
            }
        </script>
        <p>
 
        </p>
    </body>
</html>

24/01/2015, 22h11
NoSmoking
Bonjour,
tu reçois en retour une chaine au "format" JSON, il te faut la parser pour avoir accès à un "vrai" objet JSON
Code:

1 2 3 4 var obj = JSON.parse( responseText); for( var ind in obj){ // pour parcourir les propriétés de l'objet console.log( obj[ind]); }
Concernant document.write, c'est à bannir Comprendre document.write() en JavaScript
25/01/2015, 00h21
dandy-kun

merci, mais comment je fais pour écrire les données à l'intèrieur d'un tableau ?
je vois bien les infos dans les log mais j'aimerais les mettre en forme dans un tableau avec les infos qui me sont utiles et pas les autres.
25/01/2015, 12h57
dandy-kun

j'arrive a accéder au élément et a les mettre dans un table, mais je souhaite accédé a l’élément name: london comment faire svp.

Code:

{"coord":{"lon":-0.13,"lat":51.51},"sys":{"type":3,"id":60992,"message":0.1036,"country":"GB","sunrise":1422172089,"sunset":1422203854},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"base":"cmc stations","main":{"temp":278.45,"humidity":86,"pressure":1031.1,"temp_min":278.45,"temp_max":278.45},"wind":{"speed":1,"gust":2.8,"deg":180},"rain":{"3h":0},"clouds":{"all":80},"dt":1422185522,"id":2643743,"name":"London","cod":200}

Cela revient à avoir le JS suivant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var obj = {
  "coord": {
    "lon": -0.13,
    "lat": 51.51
  },
  "sys": {
    "type": 3,
    "id": 60992,
    "message": 0.1036,
    "country": "GB",
    "sunrise": 1422172089,
    "sunset": 1422203854
  },
  "weather": [{
    "id": 803,
    "main": "Clouds",
    "description": "broken clouds",
    "icon": "04d"
  }],
  "base": "cmc stations",
  "main": {
    "temp": 278.45,
    "humidity": 86,
    "pressure": 1031.1,
    "temp_min": 278.45,
    "temp_max": 278.45
  },
  "wind": {
    "speed": 1,
    "gust": 2.8,
    "deg": 180
  },
  "rain": {
    "3h": 0
  },
  "clouds": {
    "all": 80
  },
  "dt": 1422185522,
  "id": 2643743,
  "name": "London",
  "cod": 200
}

donc pour récupérer le name, c'est obj.name ou encore obj['name'] et pour le reste le même principe.

26/01/2015, 10h23
dandy-kun

j'ai un problème si un élèment du json contient par exemple @id je ne peut pas acceédé a l'élèment
j'ai ccette erreur index.html:35 Uncaught SyntaxError: Unexpected token ILLEGAL
comment enlevé les @? merci

j ai réussi en fesant sa:
Code:

1 2 3 4 var regAccentA = new RegExp('[@]', 'gi'); var json = xmlhttp.responseText; json = json.replace(regAccentA ,''); var myArr = JSON.parse(json);
maintenant il me reste a utiliser une boucle for pour mettre les donée dans un table.

26/01/2015, 14h02
Bovino

C'était pas nécessaire... :aie:

NoSmoking t'a indiqué deux syntaxes possibles. Les caractères spéciaux ne posent de problème que pour la première syntaxe (dite pointée), pour la seconde, ça passe sans problème.
26/01/2015, 15h09
dandy-kun

OK, merci mais comment je procède pour créer le tableau avec un for ?
27/01/2015, 22h42
NoSmoking

Il existe des méthodes comme createElement, insertCell et j'en passe pas mal
:faq:
- Les tableaux (balise table)
- Utilisation du DOM