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 🙂

Obs: O blog Ahaprogramando é informativo, e não tem responsabilidade em dar suporte a dúvidas relacionadas ou não ao conteúdo apresentado, encontrar bugs em arquivos do leitor, ou auxiliá-lo em projetos pessoais.

Tags: , , ,

33 Responses to “Passar array de PHP para Javascript, e de Javascript para PHP”

  1. Alan Hidalgo Pagoto Says:

    Olá Leonir!
    Muito obrigado pela publicação desta transformação, pois já deu medo de imaginar que eu teria que usar ajax para resolver isto. Obrigado e, para o que precisar, entra em contato.
    Valeu,
    Abraço,
    Alan

  2. Cleiton Says:

    Cara vei, nem sei se precisa dizer, mas esse post tá simplesmente fenomenal!!!! Animal mesmo! Show!

  3. Alexandre Broggio Says:

    Vlw mesmo pelo post deu mo ajuda aqui
    abraço

  4. Nina Says:

    oiee
    PERGUNTA: e as chaves do array que foi enviado? não aparecem no JS, eu passei um array, legal consegui capturar mas as chaves do meu array não são necessariamente 0,1,2,3,4..etc são outros valores

    • Marcio Says:

      Nina, neste caso, para passar informações do php para o java script, é melhor usar JSON, assim ele mantem os indices originais.

  5. Vander Says:

    Leonir, realmente este post está show.
    Muito bem explicado.
    Era exatamente o que eu estava procurando.
    Claro que precisei fazer uma adaptação aqui, outra ali… mas isto é normal…
    Não há o que falar.
    Você está de parabéns.
    Não só pelo post, mas principalmente pela boa vontade em compartilhar conhecimento.
    Pode ter certeza que atitudes como esta sempre são recompensadas, hora ou outra, de uma maneira ou outra…
    Valeu MESMO…..
    Vander.

  6. Estevão Says:

    Este post me salvou, amigo! parabén e obrigado!

  7. daniel Says:

    Não sei se é só comigo mas muitos me confirmaram não é possivel usar PHP dentro da tag javascript ???? dai eu me pergunto como vcs conseguem ???

    • Leonir Zimmermann Says:

      Olá Daniel, a resposta é simples, não importa no meio do que os códigos PHP estão pois sempre serão interpretados pelo servidor e os resultados gerados pelos scripts PHP serão deixados no meio de HTML, Javascript, ou CSS. O que aconte é que, se vc tiver um script PHP dentro de um arquivo .js (javascript) ele não será interpretado pelo servidor que só vai interpretar arquivos que possuam a extensão .php. É como HTML, quando vc puser scripts php em meio a tags HTML, estes scripts apenas vão agir se a extensão do arquivo que os contém seja .php, se for .html não. Conclusão, em um arquivo com extensão .php, vc pode ter tanto tags HTML, quanto scripts Javascript, e scripts PHP enxendo as linguiça hehe 🙂

  8. ramon santana santos Says:

    Parabens, perfeito o post. Me ajudou muito a resolver um problema que tive. Vou colar o codigo aqui para divulgar.

    0)
    {
    //TRANSFORMA A STRING RECEBIDA EM UM ARRAY JS
    array_produtos = vetorElementos.split(“|”);

    //VARRE O ARRAY PARA EXPANDIR TODOS
    for(cont=0; cont

  9. Passagem de arrays entre PHP e Javascript « rcdeveloper Says:

    […] https://ahaprogramando.wordpress.com/2008/11/29/passar-array-de-php-para-javascript-e-de-javascript-p… CategoriasJavascript, PHP, Programação Web Tags:Javascript LikeBe the first to like this post. Comentários (0) Trackbacks (0) Deixar um comentário Trackback […]

  10. Lucas Comino Says:

    Caraca, você me ajudou muito! Obrigado mesmo!!

  11. Cleriston Says:

    “Não sei se é só comigo mas muitos me confirmaram não é possivel usar PHP dentro da tag javascript ???? dai eu me pergunto como vcs conseguem ???”

    Também não consegui, Abri uma tag e dentro dela tentei inserir um script php simplesmente nem o editor reconhece o php =/

    ps: estou fazendo isso numa pagina com extensão .php

    tem como postar um exemplo completo? grato e parabéns pelos posts

    • Leonir Zimmermann Says:

      Olá Clariston! Obrigado pelo comentário 🙂
      Vou te responder por e-mail. Quem sabe encontramos a solução e isto gera um novo post…
      Abraço.

  12. Mauricio Says:

    Ta e como faço se quero passar uma matriz do php pro javascript?

    Com o vetor funciono legal, mas como to precisando faze isso com uma matriz queria saber como faz. Se puder ajudar eu agradeço.

  13. Mauricio Says:

    bom eu preciso fazer um grafico de barras, entao eu coletei os dados do banco e os coloquei em uma matriz que no codigo abaixo é a “$val[$questao][$f];” o problema todo ta na variavel “$f” que eu não consigo fazer com q mude, para assim variar o indice da matriz, entao queria passar a matriz do php para o javascript assim como eu fiz com o vetor nomfunc[f] utilizando a variavel “f” do javascript ao inves da do php.

    Acabei de ler em um fórum que javascript não da suporte a matrizes dai nã sei como posso resolver essa situação.

    var nomfunc = “”;

    nomfunc = nomfunc.split(“|”);

    for (i in nomfunc)
    alert(nomfunc[i]);

    graph = new Array();

    for(var f=0;f<func;f++){

    graph[f]=[,nomfunc[f]];

    $f++;
    }

    • Cleriston Says:

      como você fez no php? de que forma montou a string?

      levando em consideração o exemplo acima uma forma de fazer seria assim, porém tenho certeza que não vai dar muito certo pois primeiro é preciso saber como ficou dispostos os dados na string que vc montou e como associou a variável do javascript, neste exemplo usei ‘|’ e ‘¬’ para diferenciar linhas de colunas.

      var val = “”;

      val = val.split(“|”);
      for(i in val)
      temp = val[i].split(“¬”);
      for(j in temp)
      alert(temp[j]);

      • Mauricio Says:

        eae cleriston valeu por responde. Olha o meu problema é que eu não consigo transforma a matri “z$val[$questao][$f];” em string, da um erro a seguir:
        “Notice: Array to string conversion in D:\wamp\www\usoindicado\avaliacoes\ranking.php on line 375″ nessa linha 375 fiz a conversão como ensinado nesta página como se faz com o vetor assim:
        $val_val=implode(“|”,$val);

        Então a dúvido seria também em como conseguir transformar essa matriz em string.

  14. Mauricio Says:

    eae cleriston valeu por responde. Olha o meu problema é que eu não consigo transforma a matri “z$val[$questao][$f];” em string, da um erro a seguir:
    “Notice: Array to string conversion in D:\wamp\www\usoindicado\avaliacoes\ranking.php on line 375” nessa linha 375 fiz a conversão como ensinado nesta página como se faz com o vetor assim:
    $val_val=implode(“|”,$val);

    Então a dúvido seria também em como conseguir transformar essa matriz em string.

  15. Cleriston Says:

    Grande Mauricio,
    É algo quem ainda não fiz na prática, mas pensando que uma matriz nada mais é um array de arrays vc pode fazer um implode() para cada posição do array maior e ir concatenando as strings de cada posição separando por um caractere especial diferente. vamos lá.

    for(i= 0; i< $num_linhas; i++){
    $string = ''.string .'¬' .implode("|", matriz[i]).'';
    }

    não tenho certeza se a sintaxe ai de cima vai dar muito certo no implode(), se não, vc cria na "unha" o vetor que representa matriz[i]
    qualquer coisa pode mandar e-mail para mim cleriston.os@gmail.com que respondo mais rápido, quanto a etapa do javascript dá certo sim usei no meu projeto, só que há uma diferença sutil entre o que eu fiz, não precisei fazer essa sua conversão pq as informações estavam em um banco de dados e já fiz a busca montando uma estrutura pensando em como passar para o javascript, mas de qualquer maneira não desista é possível sim, qualquer coisa estou a disposição!

    • Mauricio Says:

      Infelizmente uma das minhas mensagens não apareceram aqui no blog, mas queria informa que eu consegui o desejado, deu um nó na minha mente mas consegui. Queria agradecer ao leonir pelo artigo e tu cleriston pelo complemento, valeu, não teria conseguido sem vocês.

      Lembrando que a matriz era=$val[$questao][$f];

      No php fiz assim:

      $val_val[$questao]=implode(“|”,$val[$questao]);
      $val_val2=implode(“¬”,$val_val);

      No javascript:

      var quest = ” echo $val_val2; “;

      quest = quest.split(“¬”);

      var y=0;

      var temp=new Array();

      for (i in quest){

      temptemp=quest[i].split(“|”);

      for(j in temptemp){

      temp[y]=temptemp[j];

      y++;

      }

      }

      Na verdade transformei a matriz num vetor que abrangia tudo, dai tive que trabalha com essa lógica, mas enfim deu certo, valeu!

  16. work at home Says:

    work at home…

    […]Passar array de PHP para Javascript, e de Javascript para PHP « Ahã… programando…![…]…

  17. Jorge Says:

    Muito útil. Parabens! Pode organizar tudo em ficheiros e partilhar em http://www.mais-codigo.com !

  18. Rob Says:

    obrigado! Foi uma boa dica!

  19. Deivid Says:

    Parabén pelo post, foi de grande ajuda! 😉

  20. Helton Pietrangello Says:

    Parabéns cara !!!!!

  21. Monica Says:

    Olá Leonir,
    Como seu post está excelente e ilustra com clareza o assunto, vou te fazer um pedido: “Como seria passar uma matriz bi-dimensional em vez de um array simples?” Estou me debatendo com isso e não consegui ajuda. Pode me ajudar?

  22. Leonir Zimmermann Says:

    Olá Mônica, há alguns anos que não tenho trabalhado + com programação WEB, então não tenho uma resposta na manga pra te entregar, teria que pesquisar os melhores métodos atuais, montar um exemplo e testar antes. Mas não estou com tempo pra isso hehe. Porém, encontrei em um outro blog algo que deve te ajudar, e em Alto Nivel:

    http://www.dyn-web.com/tutorials/php-js/json/multidim-arrays.php

    Um abraço!

  23. adailton Says:

    muito obrigado seu codigo funciona suavemente, porem eu nao consegui fazer o mesmo procedimento com esse meu codigo simples.

    o form:

    o js;

    var array_produtos = Array([0,6,7,1,2,5,8,9]);

    var i, array_produtos;

    array_produtos = array_produtos.split(“|”);

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

    document.getElementById(“array_produtos”).value = array_produtos.join(“|”);

    o recebe.php é esse;

    preciso desse codigo mas nao retorna nada no rebe.php por favor alguem da help ai meu array tem que ser assim mesmo.

  24. formexplode.net Says:

    It’s hard to find knowledgeable people about
    this subject, however, you sound like you know what
    you’re talking about! Thanks

  25. Sergio F Says:

    Meu amigo, saudações!
    Me ajudou muito!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: