Angular.js: reperire json via ajax

 javascript  No Responses »
Jan 272013
 

Proviamo a completare il mini ciclo iniziato nei post precedenti rendendo oggettivamente operativo il nostro angular.js ovvero recuperando i dati in formato json da una pagina php

La chiamata ha una struttura essenziale, useremo il metodo get passando la url della pagina che ci manderà il JSON e gestiremo con success la risposta assegnandola direttamente allo $scope:

function UtenteListCtrl($scope, $http) {
$http.get('php-to-json-01.php').success(function(data) {
$scope.utenti = data;
});
$scope.orderProp = 'id';
}

L’ultima istruzione serve per ordinare i dati.

Il resto della pagina è in linea con i post precedenti, solo gli accorgimenti del caso

<body ng-controller="UtenteListCtrl">
Cerca: <input ng-model="query">
<ul>
<li ng-repeat="utente in utenti | filter:query">
<span>{{utente.myid}}</span>
<span>{{utente.mynome}}</span>
<span>{{utente.mycognome}}</span>
</li>
</ul>
</body>

L’esempio

 Share

Angular.js: ordinare e filtrare dei dati

 javascript  No Responses »
Jan 252013
 

Prendendo spunto dal post precedente vediamo come filtrare “al volo” dei dati e presentarli ordinati:

Lo schema sarà identico al tutorial del post precedente ma con delle interssanti varianti:

come prima cosa portiamo il controller direttamente sulla lista:


<ul ng-controller="BrowserListCtrl">

successivamente prepariamo un campo di input per filtrare i dati


Cerca: <input ng-model="query">

con l’ng-model per implementare il binding dei dati

e infine


<li ng-repeat="borwser in borwsers | filter:query | orderBy:'nome'">

dove nell’istruzione per ripetere tante liste quanti sono i nostri elemnti nel JSON agganciamo, separandoli con il pipe, ance il filtro e la clausola di ordinamento

L’esempio

 Share

Angular.js: come iniziare

 javascript  No Responses »
Jan 232013
 

Angular.js è un framework javascript patrocinato da Google e basato sul modello MVC: Vediamo come funziona partendo dall’intestazione del nostro file html:


<!DOCTYPE HTML>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular js</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script>
...
</script>
</head>

Ci sono due cose da notare subito: la prima è il collegamento alla libreria, ma questo è scontato, ma soprattutto la direttiva ng-app che indica la root della pagina alla quale applicare il parsing del nostro framework

Il passaggio successivo è quello di preparare una fonte di dati che verranno utilizzati nella nosta pagina:


function BrowserListCtrl($scope) {
$scope.borwsers = [
{"id": "1", "nome": "Chrome"},
{"id": "2", "nome": "Firefox"},
{"id": "3", "nome": "Safari"},
{"id": "4", "nome": "Internet explorer"},
{"id": "5", "nome": "Opera"}
];
}

Questo sarà il nostro controller che contiene l’array di dati in formato JSON

Passaggio successivo sarà associare alla nostra pagina il controller


<body ng-controller="BrowserListCtrl">

e infine preparare la view, con una sintassi un po’ criptica ma decisamente economica:

<ul>
<li ng-repeat=”borwser in borwsers”>
<span>{{borwser.id}}</span>
<span>{{borwser.nome}}</span>
</li>
</ul>

L’esempio completo

Angular js Share

da php a json 02

 PHP  No Responses »
Dec 232012
 

Una seconda possibilità per produrre un output JSON è a partire da un oggetto php. Pertanto dichiariamo la classe user con tre proprietà public che verranno valorizzate dalla funzione crea_user() quando istanziamo il nostro oggetto. Una volta istanziato l’oggetto e chiamata la funzione possiamo semplicemente stampare la variabile oggetto con json_encode:


error_reporting(0);
require('include/mysql.inc.php');

class User{
public $id;
public $nome;
public $cognome;
public function __construct($id){
$this->id=$id;
}
public function crea_user(){
$sql='select nome, cognome from utenti where id='.$this->id. ' limit 1';
$fetch=mysql_query($sql);
$row=mysql_fetch_array($fetch, MYSQL_ASSOC);
$this->nome=$row['nome'];
$this->cognome=$row['cognome'];
}
}

$utente=new User(1);
$utente->crea_user();
echo json_encode($utente);

L’esempio

 Share

da php a json 01

 PHP  No Responses »
Dec 202012
 

Attualmente uno dei formati più popolari per l’interscambio dei dati è JSON, che abbina l’economia nella quantità dei dati veicolati a una struttura semplice ma efficace.

Vediamo come prelevare dei dati da un database mysql con php e convertirli in un formato JSON. La cosa è straordinariamente semplice dato che possiamo convertire un array nel formato JSON.


error_reporting(0);
 require('include/mysql.inc.php');
 $return_arr=array();
 $sql='select id, nome, cognome from utenti where 1 order by nome';
 $fetch=mysql_query($sql);
 while($row=mysql_fetch_array($fetch, MYSQL_ASSOC)){
 $row_array['myid']=$row['id'];
 $row_array['mynome']=$row['nome'];
 $row_array['mycognome']=$row['cognome'];
 array_push($return_arr,$row_array);
 }
 mysql_close($conn);
 echo json_encode($return_arr);

La porzione di codice fino al ciclo while dovrebbe essere estremamente famigliare a chiunque conosca il php, la prte interessante è la costruzione dell’array associativo usando degli alias per nascondere i nomi dei campi. Una volta creato il nostro array non ci resta che stamparlo con json_encode.

Il risultato

 Share

jQuery: ricerca su twitter e parsing JSON

 JQuery  No Responses »
Oct 232012
 

Uno dei formati più popolari per l’interscambio dei dati e JSON.
Vediamo come fare una ricerca su twitter e gestire la risposta.

Per prima cosa al document.ready andremo a mappare sugli input che hanno type=button l’evento click,
in questo modo la parte di form relativa all’input verrà gestita.
Il nostro utente inserirà la sua keyword, al click avvieremo la ricerca chiamando l’opportuna funzione:


<p><input id="cerca" type="search" /><br />
<input type="button" value="cerca" /></p>



$(document).ready(function(e) {$(‘input[type="button"]‘).click(function(){cerca();})})

La nostra funzione come prima cosa leggerà il valore inserito e poi costruirà la urla da chiamare:


var searchTerm=$(‘#cerca’).val();
 var baseUrl=’http://search.twitter.com/search.json?q=’;

Passo successivo la chiamata vera e propria e il parsing della risposta:

 $.getJSON(baseUrl+searchTerm+’&callback=?’,function(data){

})

La variabile data conterrà i dati di ritorno che scorreremo con un ciclo each, meglio scorreremo data.results che contiene le informazioni che vorremo visualizzare.
all’interno del ciclo creeremo l’html da appendere a un contenitore opportunamente predisposto nella pagina:

 $.each(data.results,function(){
 $(‘<div></div>‘)
 .append(‘<img src="<a href="http://www.lorenzodeambrosis.net/blog/2012/10/jquery-ricerca-su-twitter-e-parsing-json/'+this.profile_image_url+'" target="_blank">'+this.profile_image_url+'</a>" alt="" />‘)
 .append(‘<a href="http://www.lorenzodeambrosis.net/blog/2012/10/jquery-ricerca-su-twitter-e-parsing-json/#">‘+this.from_user+’</a>‘+this.text+’‘)
 .appendTo(‘#contenitore’)
 })

L’esempio completo

 Share