11496 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Comment lire un json en javascript et le mettre en place ? A

Bonjour,


A partir d'ajax, j'ai réalisé un json.
Et je souhaiterai ensuite le lire (et le mettre en forme) par javasccript.

Je n'y arrive.
Je tourne en rond comme un fou.

Pouvez-vous m'aider ?
J'aurais aimé avoir votre aide, svp !


	function plusMetal(indmetal) {
		resetrecherche();
		metals="";
		if (swMetal[indmetal]==0) {
			swMetal[indmetal]=1;
		} else {
			swMetal[indmetal]=0;
		}
		for (var ind=0; ind<swMetal.length; ind++) {
			if (swMetal[ind] == 1) {
				metals += ind + " ";
			}
		}
		if (metals != "") {
			metals = metals.substr(0,(metals.length-1));
		}
		newrecherche();
		remplirrecherche();
	}



	function newrecherche() {
		url();
		var requete = creerRequete();
		var pgm = "php/chargementbagues.php";
		requete.open("POST", pgm, true);
		requete.onreadystatechange = remplirrecherche;
		requete.send(null);
		document.getElementById("bloc2101").innerHTML="Chargement terminé !";
	}



	function remplirrecherche() {
		if (req.readyState == 4) {
			var doc = eval('(' + requete.responseText + ')');
			var oTable = document.getElementById('bloc31');
			oTable.value = doc.aaData[];
			alert("vvv");
		}
	}

Modifié par jytest (28 May 2013 - 11:32)
PS.
Je viens de modifier mes sources ci-dessus.

Je joins aussi "chargementbagues.php"

 <?php
	session_start();

	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	 * Easy set variables
	 */
 
	/* Array of database columns which should be read and sent back to DataTables. Use a space where
	 * you want to insert a non-database field (for example a counter or static image)
	 */
	$aColumns = array();
	$aColumns [] = 'ref_sertissure';			/* 00	*/
	$aColumns [] = 'nofinition';				/* 01	*/
	$aColumns [] = 'modele';					/* 02	*/
	$aColumns [] = 'carat';						/* 03	*/
	$aColumns [] = 'type_solitaire';			/* 04	*/
	$aColumns [] = 'PV_HT';						/* 05	*/
	$aColumns [] = 'statut'; 					/* 06	*/
	$aColumns [] = 'vue_01';					/* 07	*/
	$aColumns [] = 'max_carat_rond';			/* 08	*/
	$aColumns [] = 'max_carat_marquise';		/* 09	*/
	$aColumns [] = 'max_carat_emeraude';		/* 10	*/
	$aColumns [] = 'max_carat_radiant';			/* 11	*/
	$aColumns [] = 'max_carat_ovale';			/* 12	*/
	$aColumns [] = 'max_carat_poire';			/* 13	*/
	$aColumns [] = 'max_carat_coeur';			/* 14	*/
	$aColumns [] = 'max_carat_aascher';			/* 15	*/
	$aColumns [] = 'max_carat_cs';				/* 16	*/
	$aColumns [] = 'max_carat_autre';			/* 17	*/				
 
	/* Indexed column (used for fast and accurate table cardinality) */
	$sIndexColumn = "ref_sertissure";
 
	/* DB table to use */
	$sTable = "sertissure_data";
 
	/* Database connection information */
	$gaSql['user']       = "***";
	$gaSql['password']   = "***";
	$gaSql['db']         = "***";
	$gaSql['server']     = "***";
 
 
	/* 
	 * MySQL connection
	 */
	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
		die( 'Could not open connection to server' );
 
	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
		die( 'Could not select database '. $gaSql['db'] );
 
	mysql_set_charset( 'utf8' ); 	


	/* 
	 * Paging
	 */
	$sLimit = "";
	if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
	{
		$sLimit = "LIMIT ".intval( $_GET['iDisplayStart'] ).", ".
			intval( $_GET['iDisplayLength'] );
	}
 
 
	/*
	 * Ordering
	 */
	$sOrder = "";
	if ( isset( $_GET['iSortCol_0'] ) )
	{
		$sOrder = "ORDER BY  ";
		for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
		{
			if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
			{
				$sOrder .= "`".$aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."` ".
					($_GET['sSortDir_'.$i]==='asc' ? 'asc' : 'desc') .", ";
			}
		}
 
		$sOrder = substr_replace( $sOrder, "", -2 );
		if ( $sOrder == "ORDER BY" )
		{
			$sOrder = "";
		}
	}


	/* 
	 * Filtering
	 * NOTE this does not match the built-in DataTables filtering which does it
	 * word by word on any field. It's possible to do here, but concerned about efficiency
	 * on very large tables, and MySQL's regex functionality is very limited
	 */
	$sWhere = "";
	if ( $_GET['sSearch'] != "" )
	{
		$sWhere = "(";
		$aWords = preg_split('/\s+/', $_GET['sSearch']);
		for ( $j=0 ; $j<count($aWords) ; $j++ )
		{
			if ( $aWords[$j] != "" )
			{
				$sWhere .= "(";
				for ( $i=0 ; $i<count($aColumns) ; $i++ )
				{
					$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string( $aWords[$j] )."%' OR ";
				}
				$sWhere = substr_replace( $sWhere, "", -3 );
				$sWhere .= ") AND ";
			}
		}
		
		$sWhere = substr_replace( $sWhere, "", -5 );
		$sWhere .= ")";
	}
	
	/* Individual column filtering */
	$sColumnWhere = "";
	for ( $i=0 ; $i<count($aColumns) ; $i++ )
	{	
		if ( $_GET['sSearch_'.$i] != "" )
		{
			$aWords = preg_split('/\s+/', $_GET['sSearch_'.$i]);
			$sColumnWhere .= "(";
			for ( $j=0 ; $j<count($aWords) ; $j++ )
			{
				if ( $aWords[$j] != "" )
				{
					$sColumnWhere .= "`".$aColumns[$i]."` = '".mysql_real_escape_string( $libelle[ $i ][ $aWords[$j] ] )."' OR ";
				}
			}
			$sColumnWhere = substr_replace( $sColumnWhere, "", -3 );
			$sColumnWhere .= ") AND ";
		}
		if ( $_GET['sStart_'.$i] != "" AND $_GET['sEnd_'.$i] != "" )
		{
			$sColumnWhere .= "(";
			$sColumnWhere .= "`".$aColumns[$i]."` >= '".mysql_real_escape_string( $_GET['sStart_'.$i] )."' AND `".$aColumns[$i]."` <= '".mysql_real_escape_string( $_GET['sEnd_'.$i] )."' ";
			$sColumnWhere .= ") AND ";
		}
	}
	
	if ( $sColumnWhere != "" ) {
		$sColumnWhere = substr_replace( $sColumnWhere, "", -5 );
		if ( $sWhere == "" ) {
			$sWhere = $sColumnWhere;
		} else {
			$sWhere .= " AND ".$sColumnWhere;
		}
	}
	
	if ( $sWhere != "" )
	{
		$sWhere = "WHERE ".$sWhere;
	}
 
 
	/*
	 * SQL queries
	 * Get data to display
	 */
	$sQuery = "
	 SELECT SQL_CALC_FOUND_ROWS `".str_replace(" , ", " ", implode("`, `", $aColumns))."` 
		FROM   $sTable
		$sWhere
		$sOrder
		$sLimit
		";
	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
 
	/* Data set length after filtering */
	$sQuery = "
		SELECT FOUND_ROWS()
	";
	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
	$iFilteredTotal = $aResultFilterTotal[0];
 
	/* Total data set length */
	$sQuery = "
		SELECT COUNT(`".$sIndexColumn."`)
		FROM   $sTable
	";
	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
	$aResultTotal = mysql_fetch_array($rResultTotal);
	$iTotal = $aResultTotal[0];
 
 
	/*
	 * Output
	 */
	$output = array(
		"sEcho" => intval($_GET['sEcho']),
		"iTotalRecords" => $iTotal,
		"iTotalDisplayRecords" => $iFilteredTotal,
		"aaData" => array()
	);
 
	while ( $aRow = mysql_fetch_array( $rResult ) )
	{
				$row = array();
				$row[] = trim($aRow[ 'ref_sertissure' ]);
				$row[] = trim($aRow[ 'nofinition' ]);
				$row[] = trim($aRow[ 'modele' ]);
				$inter = trim($aRow[ 'carat' ]);
				$row[] = number_format($inter, 2, ',', ' ');
				$row[] = trim($aRow[ 'type_solitaire' ]);
				$inter = trim($aRow[ 'PV_HT' ]);
				$row[] = number_format($inter, 0, ',', ' ');
				$row[] = trim($aRow[ 'statut' ]);
				$row[] = trim($aRow[ 'vue_01' ]);
				$inter = trim($aRow[ 'max_carat_rond' ]);
				$row[] = number_format($inter, 2, ',', ' ');
				$inter = trim($aRow[ 'max_carat_marquise' ]);
				$row[] = number_format($inter, 2, ',', ' ');
				$inter = trim($aRow[ 'max_carat_emeraude' ]);
				$row[] = number_format($inter, 2, ',', ' ');
				$inter = trim($aRow[ 'max_carat_radiant' ]);
				$row[] = number_format($inter, 2, ',', ' ');
				$inter = trim($aRow[ 'max_carat_ovale' ]);
				$row[] = number_format($inter, 2, ',', ' ');
				$inter = trim($aRow[ 'max_carat_poire' ]);
				$row[] = number_format($inter, 2, ',', ' ');
				$inter = trim($aRow[ 'max_carat_coeur' ]);
				$row[] = number_format($inter, 2, ',', ' ');
				$inter = trim($aRow[ 'max_carat_aascher' ]);
				$row[] = number_format($inter, 2, ',', ' ');
				$inter = trim($aRow[ 'max_carat_cs' ]);
				$row[] = number_format($inter, 2, ',', ' ');
				$inter = trim($aRow[ 'max_carat_autre' ]);
				$row[] = number_format($inter, 2, ',', ' ');
				$row[] = "<a href='javascript:envoiDetails(".trim($aRow[ 'ref_sertissure' ]).");'><span class='voir'>Détails</span></a>";
				$output['aaData'][] = $row;
	}

	echo json_encode( $output );
?>

Modifié par jytest (27 May 2013 - 16:52)
Salut,

Ta fonction remplirrecherche() fait référence aux variables "req" et "requete" qui lui sont inconnues. Dans ton cas peux les remplacer par le mot clé "this" qui fait implicitement référence à la requête Ajax.

Concernant le résultat récupéré par responseText il est préférable de l'interpréter via la fonction JSON.parse() plutôt que la fonction eval().

Ce qui donne (en simplifié) :

var requete = new XMLHttpRequest();
requete.open("POST", "php/chargementbagues.php", true);
requete.onreadystatechange = remplirrecherche;
requete.send(null);

function remplirrecherche() {
	if (this.readyState == 4) {
		var jsonResponse = JSON.parse('(' + this.responseText + ')');
		alert(jsonResponse); // ou console.log(jsonResponse) pour te faciliter le débugage va la console
	}
}

Modifié par moust (27 May 2013 - 19:42)
Moust, je te remercie pour ton passage sur mon post !

J'ai intégré ta solution dans mon code... Cela ne fonctionne pas !
A l'aide, svp

Pour info,
Voici "js/requete.js" (qui est linké)

// JavaScript Document

function creerRequete() {
	var requete = null;
	try {
		requete = new XMLHttpRequest();	
	} catch (essaimicrosoft) {
		try {
			requete = new ActiveXObject("Msxml2.XMLHTTP");	
		} catch (autremicrosoft) {
			try {
				requete = new ActiveXObject("Microsoft.XMLHTTP");	
			} catch (echec) {
				requete = null;
			}
		}
	}

	if (requete == null) {
		alert("Impossible de créer l'objet requete");
	} else {
		return requete;
	}	
}

Modifié par jytest (28 May 2013 - 10:17)
J'ai donc revu ces bouts de code avec la proposition de Moust.

	function newrecherche() {
		url();
		var requete = creerRequete();
		var pgm = "php/chargementbagues.php";
		requete.open("POST", pgm, true);
		requete.onreadystatechange = remplirrecherche();
		requete.send(null);
		document.getElementById("bloc2101").innerHTML="Chargement terminé !";
	}

	function remplirrecherche() {
		alert ("ok0");
		if (requete.readyState == 4  && requete.status == 200) {
			alert ("ok1");
			var jsonResponse = JSON.parse('(' + requete.responseText + ')');
			alert ("ok2");
			alert(console.log(jsonResponse)); // ou console.log(jsonResponse) pour te faciliter le débugage va la console
			var oTable = document.getElementById('bloc31');
//			oTable.value = doc.aaData[];
			alert("vvv");
		}
	}


Mais... cela ne fonctionne pas encore !
Pourquoi cela ne fonctionne-t-il pas ?
Je n'ai même pas de passage à l'intérieur de mon test
"if (requete.readyState == 4) {..."

Bizarre ! Vous avez dit bizarre ?
Oui, c'est bizarre !!! (et énervant !)
Modifié par jytest (28 May 2013 - 10:51)
Et si je mets ce bout de code-ci :

	function newrecherche() {
		url();
		var requete = creerRequete();
		var pgm = "php/chargementbagues.php";
		requete.open("POST", pgm, true);
		requete.onreadystatechange = function() {
			alert ("ok0");
			if (requete.readyState == 4  && requete.status == 200) {
				alert ("ok1");
				var jsonResponse = JSON.parse('(' + requete.responseText + ')');
				alert ("ok2");
				alert(console.log(jsonResponse)); // ou console.log(jsonResponse) pour te faciliter le débugage va la console
				var oTable = document.getElementById('bloc31');
	//			oTable.value = doc.aaData[];
				alert("vvv");
			}
		}
		requete.send(null);
		document.getElementById("bloc2101").innerHTML="Chargement terminé !";
	}

j'ai plein de passage "ok0"...
j'ai 1 passage "ok1"...
Et je n'ai aucun passage "ok2"

Pouvez-vous m'aider svp ?
Merci d'avance.
Modifié par jytest (28 May 2013 - 10:51)
Grâce à des recherche avec mon autre ami google, j'ai pu corriger le code comme suit :


	function newrecherche() {
		url();
		var requete = creerRequete();
		var pgm = "php/chargementbagues.php";
		requete.open("POST", pgm, true);
		requete.onreadystatechange = function() {
			alert ("ok0");
			if (requete.readyState == 4  && requete.status == 200) {
				alert ("ok1");
				var jsonResponse = JSON.parse(requete.responseText);
				alert ("ok2");
				alert(console.log(jsonResponse)); // ou console.log(jsonResponse) pour te faciliter le débugage va la console
				var oTable = document.getElementById('bloc31');
	//			oTable.value = doc.aaData[];
				alert("vvv");
			}
		}
		requete.send(null);
		document.getElementById("bloc2101").innerHTML="Chargement terminé !";
	}


Ici, j'ai avancé...
mais je n'arrive pas à obtenir la 5e zone de chaque ligne "aaData" !
(aaData est un tableau de références).

Ici, je suis vraiment bloqué,
pouvez-vous m'aider à avancer ?

Pour info, voici le début du fichier JSON :

{"sEcho":0,"iTotalRecords":"168","iTotalDisplayRecords":"168","aaData":[["10100162","1","CELINNI 1968","0,30","simple","590","ON","CELINNI1968_030B_p.jpg","2,50","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","D\u00e9tails<\/span><\/a>"],["10100272","2","CELINNI 1968","0,30","simple","590","ON","CELINNI1968_030J_p.jpg","2,50","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","D\u00e9tails<\/span><\/a>"],["10100382","3","CELINNI 1968","0,30","simple","990","ON","CELINNI1968_030B_p.jpg","2,50","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","D\u00e9tails<\/span><\/a>"],["10100182","1","CELINNI 1968","0,50","simple","590","ON","CELINNI1968_050B_p.jpg","2,50","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","D\u00e9tails<\/span><\/a>"],["10100292","2","CELINNI 1968","0,50","simple","590","ON","CELINNI1968_050J_p.jpg","2,50","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","D\u00e9tails<\/span><\/a>"],["10100305","3","CELINNI 1968","0,50","simple","990","ON","CELINNI1968_050B_p.jpg","2,50","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","D\u00e9tails<\/span><\/a>"],["10100125","1","CELINNI 1968","0,70","simple","590","ON","CELINNI1968_070B_p.jpg","2,50","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","0,00","D\u00e9tails<\/span><\/a>"],[...

Modifié par jytest (28 May 2013 - 11:20)
J'ai trouvé...
Merci à moust !
Merci google !


	function newrecherche() {
		url();
		var requete = creerRequete();
		var pgm = "php/chargementbagues.php";
		requete.open("POST", pgm, true);
		requete.onreadystatechange = function() {
			alert ("ok0");
			if (requete.readyState == 4 && requete.status == 200) {
				alert ("ok1");
				var jsonResponse = JSON.parse(requete.responseText);
				var aData = jsonResponse.aaData;
				alert ("ok2");
				alert (aData[0]);
				alert (aData[30]);
				alert (aData[60]);
				alert("vvv");
			}
		}
		requete.send(null);
		document.getElementById("bloc2101").innerHTML="Chargement terminé !";
	}
Bonne nouvelle. Smiley smile

En revanche quel navigateur utilises-tu pour tester ton code ?
Si tu utilises Chrome ou Firefox (les plus courants) tu disposes de très bons outils de développements qui peuvent énormément t'aider à comprendre tes erreurs et à déboguer ton code.

Avec Chrome :
https://developers.google.com/chrome-developer-tools/?hl=fr

Avec Firefox :
https://developer.mozilla.org/en-US/docs/Tools
Avec Firefox tu peux aussi utiliser le plugin Firebug :
https://addons.mozilla.org/fr/firefox/addon/firebug/
Sujet clos
Aller à