Parser un tableau dans un fichier JSON

**L'aigle de Carthage** · 24/03/2014, 15h52

Bonjour à toutes et tous,

je voulais parser un fichier JSON avec HTML, le fichier est le suivant:

Code :

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

1
2
3
4
5
6
7
8
{
"menu":[
    {"id": "TN", "value": "ar"} ,
    {"id": "FR", "value": "fr"} ,
    {"id": "GB", "value": "en"} ,
    {"id": "US", "value": "en"} 
],
}

voici la page HTML que je l'utilise:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
	<title>Your New Application</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
	<style type="text/css">
		/* Prevent copy paste for all elements except text fields */
		*  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
		input, textarea  { -webkit-user-select:text; }
		body { background-color:white; color:black }
	</style>
 
	<script type="text/javascript">
		/* This code is used to run as soon as Intel activates */
		var onDeviceReady=function(){
		//hide splash screen
		intel.xdk.device.hideSplashScreen();
		};
		document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
	</script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
 
        //When DOM loaded we attach click event to button
        $(document).ready(function() {
 
            //after button is clicked we download the data
            $('.button').click(function(){
 
                //start ajax request
                $.ajax({
                    url: "pays.json",
                    //force to handle it as text
                    dataType: "text",
                    success: function(data) {
 
                        //data downloaded so we call parseJSON function 
                        //and pass downloaded data
                        var json = $.parseJSON(data);
                        //now json variable contains data in json format
                        //let's display a few items
                        $('#results').html('Country: ' + json.menu.id[0] + '<br />Language: ' + json.menu.value[0]);
                    }
                });
            });
        });
    </script>
 
</head>
<body>
    <a href="pays.json" target="_blank">Open JSON file</a><br />
    <input type="button" value="Get and parse JSON" class="button" />
    <br />
    <span id="results"></span>
</body>
</html>

Le problème lorsque j'exécute, je ne reçoit rien en cliquant sur le bouton "Get and parse JSON". Je me demande comment faire pour afficher le contenu de mon fichier JSON.

Merci!

**SpaceFrog** · 24/03/2014, 16h57

Code :

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

 dataType: "text",

=>

Code :

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

dataType: "json",

et tu reçois un json directement

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
	url: "pays.json",
	//force to handle it as text
	dataType: "json",
	success: function(data) {
 
		//data downloaded so we call parseJSON function 
		//and pass downloaded data
		//now json variable contains data in json format
		//let's display a few items
		$('#results').html('Country: ' + data['menu'][0]['id'] + '<br />Language: ' + data['menu'][0]['value']);
	}
});
});

Edit:

SANS SE TROMPER DANS LES INDEXES ENTRE ARRAY ET JSON ...

**L'aigle de Carthage** · 24/03/2014, 17h16

J'ai testé votre code mais rien ne s'affiche dans la balise <span>

En contre partie, est ce que mon fichier JSON est correcte syntaxiquement?

**SpaceFrog** · 25/03/2014, 08h40

Vérifie dans la console (firebug) l'état des échanges xhr ...

sinon pour ce qui est du format du json
http://jsfiddle.net/uM35r/ devrait répondre à ta question

**Bovino** · 25/03/2014, 09h42

Envoyé par L'aigle de Carthage

est ce que mon fichier JSON est correcte syntaxiquement?

Envoyé par SpaceFrog

SANS SE TROMPER DANS LES INDEXES ENTRE ARRAY ET JSON ...

La réponse a déjà été donnée !

Ton JSON est syntaxiquement correct, mais le traitement est incohérent avec sa structure...

**L'aigle de Carthage** · 25/03/2014, 13h57

Bonjour,

En parlant du syntaxe, je voudrais savoir comment faire pour parser ce code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"licenses": [
        {
            "type": "Apache",
            "url": "http://www.apache.org/licenses/LICENSE-2.0"
        },
        {
            "type": "GPL v2",
            "url": "http://www.gnu.org/licenses/gpl-2.0.html"
        }
    ]
}
,

En utilisant le code HTML:

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
<script src="libs/jquery-1.10.1.js"></script>
< script >
//When DOM loaded we attach click event to button
$(document).ready(function(){
    //after button is clicked we download the data
    $('.button').click(function(){
        //start ajax request
        $.ajax({
            url:      "data.json",
            //force to handle it as text
            dataType: "text",
            success:  function(data){
                //data downloaded so we call parseJSON function 
                //and pass downloaded data
                var json = $.parseJSON(data);
                //now json variable contains data in json format
                //let's display a few items
                $('#results').html('Plugin name: ' + license[0].type + '<br />Author: ' + license[0].url);
            }
        });
    });
});
</script>