0

Olá!

Gostaria de colocar um array de objetos dentro de um input e enviar para o php usando o form montado no JQuery

No momento estou testando assim:

Meu objeto

const myObject = [
   { id: 1, nome: 'Stackoverflow' },
   { id: 2, nome: 'Linux' },
   { id: 3, nome: 'Broffice' },
   { id: 4, nome: 'MS Office' },
  ]

O que eu gostaria de colocar esse myObject em um input:

Eu tentei assim:

  let myStrObj = JSON.stringify( myObject )
  let form =  $('<form action="backend.php" method="post">'+
                 '<input type="hidden" name="objecto" value="'+myStrObj+'">'+
                '</form>'
               )
  $('body').append( form )
  form.submit()

Só que desse jeito, no php chega dessa maneira com o json_decode( $_POST['objecto'] ):

[{

Só isso

Por que que eu quero assim?

Porque é um processamento que eu quero o que backend faça e não precise me retornar, senão eu usaria assim:

$.ajax({
   url: 'backend.php',
   type: 'post',
   ...
}) 

Como não consegui fazer da maneira acima, eu tentei fazer da seguinte forma:

   let inputDados = ''
    $.each( myObject , ( i, j )=> {
        inputDados += `<input type="hidden" name="dados[${i}][id]" value="${j.id}">
        <input type="hidden" name="dados[${i}][nome]" value="${j.nome}">`
    })

E monto meu formulário assim:

      var form =  $('<form action="backend.php" method="post">'+
                       inputDados +
                    '</form>'
                   )
      $('body').append( form )
      form.submit()

E no php chega assim:

array(
  0 => array(
       id => 1,
       nome => stackverflow
   ),
  1 => array(
       id => 2,
       nome => Linux
   ),
   2 => array(
       id => 3,
       nome => Broffice
   ),
   3 => array(
       id => 4,
       nome => MS Office
   )
)

Tem outro jeito melhor?

1 Resposta 1

1

Você pode utilizar o método JSON.stringify para serializar o JSON:

function generateInputHTMLWithJSON(inputName, data) {
  const input = document.createElement('input');
  input.type = 'hidden';
  input.name = inputName;

  // Serializa o JSON e o coloca na propriedade `value` do input:
  input.value = JSON.stringify(data);
  
  // Evita erros na serialização:
  return input.outerHTML;
}

console.log(
  generateInputHTMLWithJSON('data', [
    { username: 'Foo', age: 10 },
    { username: 'Bar', age: 20 },
    { username: 'Baz', age: 30 }
  ])
);

No exemplo acima, a propriedade Element.outerHTML foi utilizada para gerar um HTML válido sem risco de dar conflitos com as aspas do JSON, que serão propriamente escapadas para &quot;.

E no PHP:

json_decode($_POST['data']);
5
  • Então praticamente tem que ter um elemento input criado na página propriamente e não no javascript? Commented 19/05/2020 às 19:56
  • Nesse caso o input foi criado via JavaScript. Commented 19/05/2020 às 19:57
  • Porque você o comando document.createElement que cria o elemento na página, correto? Commented 19/05/2020 às 19:59
  • O document.createElement não insere o elemento no DOM a não ser que você utilize algo como o appendChild. Nesse caso, é como se o "input" ficasse na memória. Só usei o createElement para ter acesso à propriedade outerHTML. :) Commented 19/05/2020 às 20:00
  • Muito bom! Muito obrigado! Commented 19/05/2020 às 20:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .