How to add a PHP variable in Javascript?

Question

I need to play a Volume variable inside a Option that is, the person selects a category and as this category appears the list items in front of the items I need to show the volume, I am unable to make this volume appear in front of the title.

Variable in PHP ex:

<?php echo $objProduto->volume ?>

<div class="col-sm-3">
    <select name="id_produto_temp" class="form-control" id="id_produto_temp" onChange="changeUser(this.value);" required>
          <option id="opcoes" value="">Produto </option>
    </select>

</div>

Javascript:

function processXML(obj) {

    //pega a tag cliente
    var dataArray = obj.getElementsByTagName("produto");

    //total de elementos contidos na tag cliente
    if (dataArray.length > 0) {
        //percorre o arquivo XML paara extrair os dados
        for (var i = 0; i < dataArray.length; i++) {
            var item = dataArray[i];
            //contéudo dos campos no arquivo XML
            var codigo = item.getElementsByTagName("codigo")[0].firstChild.nodeValue;
            var descricao = item.getElementsByTagName("descricao")[0].firstChild.nodeValue;

            idOpcao.innerHTML = "Selecione um produto abaixo";

            //AQUI PRECISO JOGAR A VARIAVEL VOLUME NA FRENTE DE DESCRIÇÃO, OBS: JA TENTEI COLOCAR novo.text = descricao + volume só que aparece um 3 na frente de todos os textos

            var novo = document.createElement("option");
            //atribui um ID a esse elemento
            novo.setAttribute("id", "opcoes");
            //atribui um valor 
            novo.value = codigo;
            //atribui um texto
            novo.text = descricao;

            //finalmente adiciona o novo elemento
            document.frmPedidoProduto.id_produto_temp.options.add(novo);
        }
    } else {
        //caso o XML volte vazio, imprime a mensagem abaixo
        idOpcao.innerHTML = "Nenhuma familia relacionada";
    }
}

Answer 1

This example shows the result in Javascript, using the json_encode, of a PHP associative array.

Note that the associative array in PHP becomes a literal object in Javascript.

Array in PHP:

<?php
    $livro = array(
        "titulo" => "JavaScript: The Definitive Guide",
        "autor" => "David Flanagan",
        "edicao" => 6
    );
?>

Pass variable to Javascript:

<script type="text/javascript">
    var livro = <?php echo json_encode($livro, JSON_PRETTY_PRINT) ?>;
    /* var livro = {
        "titulo": "JavaScript: The Definitive Guide",
        "autor": "David Flanagan",
        "edicao": 6
    }; */
    alert(livro.titulo);
</script>

The option JSON_PRETTY_PRINT as the second argument of the function json_encode to return the result in a readable form.

You can access the properties of the object using the point syntax . as can be seen in the alert or straight parentheses syntax: livro['titulo'].

Answer 2

Using the following condition, but not pulling the Volume Value.

Function processXML(obj) {

      var dataArray   = obj.getElementsByTagName("produto");

      //total de elementos contidos na tag cliente
      if(dataArray.length > 0)
      {
         //percorre o arquivo XML paara extrair os dados
         for(var i = 0 ; i < dataArray.length ; i++)
         {
            var item = dataArray[i];
            //contéudo dos campos no arquivo XML
            var codigo    =  item.getElementsByTagName("codigo")[0].firstChild.nodeValue;
            var descricao =  item.getElementsByTagName("descricao")[0].firstChild.nodeValue;
            var volume = "<?php echo $objProduto->volume; ?>";

            idOpcao.innerHTML = "Selecione um produto abaixo";

            //cria um novo option dinamicamente  
            var novo = document.createElement("option");
                //atribui um ID a esse elemento
                novo.setAttribute("id", "opcoes");
                //atribui um valor 
                novo.value = codigo;
                //atribui um texto
                novo.text  = descricao + " <?php 
                  if($reg_des_prod[tp_categoria] != 1)
          {
            if(!empty($objProduto->volume)) 
            {

              echo " - ".$objProduto->volume." L";
            }
          }
         ?>" ;




                //finalmente adiciona o novo elemento
                document.frmPedidoProduto.id_produto_temp.options.add(novo);
         }
      }
      else
      {
        //caso o XML volte vazio, imprime a mensagem abaixo
        idOpcao.innerHTML = "Nenhuma familia relacionada";
      }   
    }