Discussion :

[Pecose]

Bonjour tout le monde.
Voila mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var liens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];
   	document.body.innerHTML += JSON.parse(liens);

Et voila le résultat:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"[object Object],[object Object],[object Object]"

EN fait je ne veux pas afficher tout le tableau je veux afficher juste un titre ou un auteur par exemple.
Mais si je fait:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

JSON.parse(liens).titre;

Ca fait du caca et en plus ça marche pas.

J'ai essayer d'autres trucs qui me renvoient undefined ou rien.
Une idée?

[Watilin]

Tu n’as pas besoin de parser, ta variable liens est déjà un objet. Le contraire de parse est JSON.stringify(). Mais je pense que tu n’en as pas besoin non plus : essaye simplement liens[0].titre, liens[1].titre, liens[0].auteur, etc.

[Pecose]

Ok je comprend, merci.
Deuxième étape:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.response);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    req.send(null);
}
 
function afficher(reponse) {
	var films = JSON.parse(reponse);
   	document.body.innerHTML += films[0].titre;
 
}
 
ajaxGet("http://localhost/javascript-web-srv/data/films.json", afficher);

le fichier JSON:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
    {
        " titre " : " Le Loup de Wall Street " ,
        " annee " : " 2013 " ,
        " realisateur " : " Martin Scorsese "
    },
    {
        " titre " : " Vice-Versa " ,
        " annee " : " 2015 " ,
        " realisateur " : " Pete Docter "
    },
    {
        " titre " : " Babysitting " ,
        " annee " : " 2013 " ,
        " Realisateur " : " Philippe Lacheau et Nicolas Benamou "
    }
]

Là, ça me renvoie undefined.
Encore une idée?

[Pecose]

J'ai trouver:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.body.innerHTML += films[0][" titre "];

Là ça marche.
Mais y a pas moyen de supprimer les espaces?
Ça donne rien si je modifie le fichier JSON.

Pour être plus précis, je ne veux pas "parse" puis supprimer les espaces je veux "parse" sans les espaces.

[Invité]

Bonjour,

il faut enlever tous les espaces inutiles DANS le fichier .json :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
"_titre_" : "_Le Loup de Wall Street_"
...

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
    {
       "titre":"Le Loup de Wall Street",
       "annee":"2013",
       "realisateur":"Martin Scorsese"
    },
    {
       "titre":"Vice-Versa",
       "annee":"2015",
       "realisateur":"Pete Docter"
    },
    {
       "titre":"Babysitting",
       "annee":"2013",
       "Realisateur":"Philippe Lacheau et Nicolas Benamou"
    }
]

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function afficher(reponse) {
	var films = JSON.parse(reponse);
	var html = '';
	for(var film in films)
	{
		html += 'titre : <b>' + films[film].titre + '</b><br />';
		html += 'année : ' + films[film].annee + '<br />';
		html += 'réalisateur : ' + films[film].realisateur + '<br /><br />';
	}
	document.body.innerHTML = html;
}

[Watilin]

Effectivement, si tu peux appliquer la solution de jreaux62, c’est le mieux. Dans le cas contraire il faudrait faire une recherche de sous-chaîne dans chaque clé de chacun des objets du tableau, et je pense que je ne surprends personne si je dis que ce n’est pas efficace.

Au fait, tu devrais utiliser textContent au lieu de innerHTML.

[Pecose]

Non j'avais déjà essayer mais le "req.response" contient des espaces malgré le fait que je les ai supprimé dans le fichier JSON.
Si quelqu'un à une idée, je reviendrai jeter un coup d’œil, sinon c'est pas grave.
Merci de votre aide.

[Watilin]

malgré le fait que je les ai supprimé dans le fichier JSON.

Comment as-tu édité ce fichier JSON ?

[Pecose]

Avec Sublime Text.
Je répond plutôt à la question "avec quoi" mais si j'ai mal interpréter la question il faut dire que je ne l'ai pas compris.

[Watilin]

Tu as raison, j’ai mal posé ma question. Je me demandais si tu ne modifiais pas une copie locale, et si l’original resterait inchangé. Ça expliquerait pourquoi les espaces « réapparaissent » alors que tu les supprimes.

Sinon ça peut aussi être un problème de cache. Essaye en rajoutant un paramètre cache buster :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

ajaxGet("http://localhost/javascript-web-srv/data/films.json?c=" + Math.random(), afficher);

Note : le cache buster n’est pas une solution optimale, dans l’idéal il faudrait configurer le serveur pour qu’il envoie des en-têtes adaptés.