Passar array de PHP para Javascript, e de Javascript para PHP

Nenhum post deste blog fez tanto sucesso quanto: “Como passar valores do PHP para o Javascript e vice versa?”. Porém tenho recebido solicitações para informar como efetuar esta tarefa com um array de valores. Demorou mas a hora chegou!

Em primeiro lugar precisamos ter em mente que array consta de uma coleção de dados em uma única variável. E o acesso ao seu conteúdo é gerenciado pela ENGINE da linguagem, associando um endereço a cada item na memória do computador.  Não adianta em PHP por exemplo, dar um echo $array_dados e esperar que todas as posições desta variável sejam mostradas, pois estamos falando de uma variável complexa, que possui um endereço específico para cada informação nela contida. Neste caso, para ver o conteúdo da variável, ou se faz uso de uma tradicional varredura com looping’s, ou de um recurso muito útil para debug quando há arrays envolvidos, o print_r($array_dados).

Enviando um Array do PHP para um código JavaScript presente na página:

Não vou me deter aqui nos fundamentos sobre PHP e Javascript, já que este assunto foi exaustivamente abordado em outros posts. Todavia para quem deseja conhecer mais sobre o comportamento destas linguagens em servidores e browsers visite estes posts:

PHP ou Javascript? Qual a diferença?

Como passar valores do PHP para o Javascript e vice versa?

Continuando…

Não podemos esquecer portanto, que o trafego de dados via protocolo HTTP entre browser e servidor é sempre textual, e que enquanto o PHP está trabalhando no lado do servidor, o Javascript faz suas tarefas no cliente (browser). Logo se desejamos enviar o conteúdo de um array que está presente em um arquivo PHP, para um código em Javascript, este conteúdo precisa trafegar do servidor ao browser junto com o HTML e códigos javascript. Sendo assim é  necessário transformar o conteúdo deste array em uma string (lembre-se: via protocolo HTTP só trafega texto). Então, se o array possuir 10 itens endereçados de 0 a 9, basta construir uma string separando os elementos por algum caractere que nunca vá ser usado no conteúdo dos ítens. Por exemplo: se meu array tem 2 posições com o conteudo: 0=>“tic-tac”,1=>“bla-bla-bla”, fica claro que não convém criar uma string com os 2 elementos separando-os por ífem “-”. Geralmente os desenvolvedores usam vírgula com o fim de separar os elementos. Particularmente prefiro o caractere pipe “|”, devido ao fato que este não consta nas regras da língua portuguesa para qualquer função, ocasionando que não estará presente em textos normais. Assim o resultado da string com elementos delimitados para um array com o conteúdo de 2 itens (0=>“tic-tac”,1=>“bla-bla-bla”) seria transformado em uma simples string:
“tic-tac|bla-bla-bla”.

Ok, qual a melhor maneira de fazer isto ?

No manual do PHP encontramos:
implode
(PHP 4, PHP 5)

implode — Junta elementos de uma matriz em uma string

Descrição
string implode ( string $agrupador, array $elementos )

Retorna uma string contendo os elementos da matriz na mesma ordem com uma ligação entre cada elemento.

Beleza já sabemos como fazer o trabalho no PHP. Então mãos à obra: Suponhamos que nossa página pertence a uma loja (que por sinal oferece produtos bastante diversificados), e de alguma forma temos em PHP um array com a lista de produtos. E precisamos dispor esta lista em uma variável javascript, para que alguma tarefa seja feita em Javascript, poderia ser o preenchimento de um list por exemplo.

<?php
//array com a lista de produtos
$produtos = array(0 =>“relogio digital”,
1 =>“mouse”,
2 =>“arame para cerca”,
3 =>“bateria de celular”,
4 =>“doce de abobora”,
5 =>“tv de plasma”,
6 =>“pacote de pregos”,
7 =>“peneu de caminhao”,
8 =>“polvora”,
9 =>“prato de porcelana”);

//criando a string com a versátil função php implode
$string_array = implode(“|”, $produtos);
?>

A essa altura um simples echo $string_array mostraria o resultado. Agora precisamos fazer que a string seja recebida em uma variável javascript, muito simples, basta um <?php echo $string_array; ?> no meio do código Javascript. Ora, este é o mesmo método para enviar valores do PHP para o meio do HTML.

Depois disto esta string deve ser convertida em um array  Javascript. Uma consulta rápida:

Em JavaScript Bilbe 5th (Danny Goodman with Michael Morrison) encontramos a função:

string.split(“delimiterCharacter” [, limitInteger])
Returns: Array of delimited items.
Compatibility: WinIE4+, MacIE4+, NN3+, Moz1+, Safari1+, testei também no Chrome e funfa!!!

Aplicar é fácil (perceba que o código PHP de linhas atrás  e o que vem a seguir estão presentes no mesmo arquivo) :

<script>
//variáveis
var i, array_produtos, string_array;
//recebe a string com elementos separados, vindos do PHP
string_array = “<?php echo $string_array; ?>“;
//transforma esta string em um array próprio do Javascript
array_produtos = string_array.split(“|”);

//varre o array só pra mostrar que tá tudo ok
for (i in array_produtos)
alert(array_produtos[i]);

</script>

Uma beleza não? E vice-versa também é possível? Vejamos:

Agora se vc possui um array que está no código JavaScript e deseja enviar para o PHP a fins de salvamento em banco de dados e tal, segue a mesma forma: transformar array em string, e para envio segue a via ilustrada no post sobre troca de dados entre JavaScript e PHP.

Mais um Help na bíblia do Javascript:

array.join(separatorString)
Returns: String of entries from the array delimited by the separatorString value.
Compatibility: WinIE4+, MacIE4+, NN3+, Moz1+, Safari1+, no Chrome testei e tá blz!!

<form method=“post” action=“recebe.php” >
<input type=“hidden” id=”send_string_array” name=“send_string_array” value=“” />
<input type=“submit” value=“Enviar” />
</form>
<script>
document.getElementById(“send_string_array”).value = array_produtos.join(“|”);
</script>

Agora basta receber a string que será enviada via POST, e transformá-la em array:

No manual do PHP:

(PHP 4, PHP 5)

explode — Divide uma string em strings

Descrição
array explode ( string $separator, string $string [, int $limit] )

Retorna uma matriz de strings, cada uma como substring de string formada pela divisão dela a partir de fronteiras presentes nela separator. Se limit está definido, a matriz retornada conterá o máximo de limit elementos com o último elemento contendo o resto da string.

Note que o código a seguir está em um arquivo separado, destinado a receber dados enviados por um fomulário, ou seja este é o recebe.php:

<?

//transforma a string de itens separados em array
$array_produtos = explode(“|”, $_POST['send_string_array']);
//mostra o conteúdo do array
print_r($array_produtos);

?>

É isto, todo este código foi testado antes de escrever o POST.
Grande Abraço.

 

[15/01/2009 - Edição]  - Ao copiar trechos de código, dos posts do Ahã Programando, substitua todas as aspas redigitando-as. Pois o WordPress substitui as aspas originais por algumas que são inúteis em programação. E os testes acabam não funcionando, deixando os entusiastas da programação web frustrados.  Não desista! Tente novamente

Tags: array, Javascript, PHP, variáveis Javascript