Un JSON.parse qui retourne undefined

Version imprimable

Bonjour tout le monde.
Voila mon code:
Code:

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:

"[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:

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?

15/03/2019, 00h59
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.

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

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
// 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:

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?

15/03/2019, 10h24
Pecose

J'ai trouver:

Code:

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.

Bonjour,

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

Code:

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

Code:

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:

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;
}

15/03/2019, 18h34
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.
18/03/2019, 23h29
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.
19/03/2019, 11h33
Watilin

Citation:

Envoyé par Pecose

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

Comment as-tu édité ce fichier JSON ?
19/03/2019, 13h53
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.
19/03/2019, 15h32
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:

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.