Criar um JSON dinamicamente com cada valor de entrada usando jquery

91

Eu tenho uma situação em que gostaria de ler alguns dados de um formato JSON por meio de PHP, no entanto, estou tendo alguns problemas para entender como devo construir o objeto Javascript para criar o formato JSON dinamicamente.

Meu cenário é o seguinte:

<input title="QA" type="text" class="email">
<input title="PROD" type="text" class="email">
<input title="DEV" type="text" class="email">

O código Javascript que tenho até agora passa por cada entrada captura os dados, no entanto, não consigo entender como processar daqui em diante.

var taskArray = {};

$("input[class=email]").each(function() {
  var id = $(this).attr("title");
  var email = $(this).val();

  //how to create JSON?

});

Eu gostaria de obter a seguinte saída, se possível.

[{title: QA, email: '[email protected]'}, {title: PROD, email: '[email protected]'},{title: DEV, email: '[email protected]'}]

Onde o e-mail é obtido pelo valor do campo de entrada.

BaconJuice
fonte

Respostas:

277

Como isso:

function createJSON() {
    jsonObj = [];
    $("input[class=email]").each(function() {

        var id = $(this).attr("title");
        var email = $(this).val();

        item = {}
        item ["title"] = id;
        item ["email"] = email;

        jsonObj.push(item);
    });

    console.log(jsonObj);
}

Explicação

Você está procurando an array of objects. Então, você cria uma matriz em branco. Crie um objeto para cada um inputusando 'título' e 'e-mail' como chaves. Em seguida, você adiciona cada um dos objetos ao array.

Se você precisar de uma corda, faça

jsonString = JSON.stringify(jsonObj);

Saída de amostra

[{"title":"QA","email":"a@b"},{"title":"PROD","email":"b@c"},{"title":"DEV","email":"c@d"}] 
ATOzTOA
fonte
Por que nesses 3 exemplos eu sempre entendo isso? 'Uncaught ReferenceError: jsonObj is not defined'
Gino
@Gino Você copiou, colar ou digitar? Veja a linha que define jsonObj.
ATOzTOA 01 de
16

Não acho que você possa transformar objetos JavaScript em strings JSON usando apenas jQuery, supondo que você precise da string JSON como saída.

Dependendo dos navegadores que você está direcionando, você pode usar a JSON.stringifyfunção para produzir strings JSON.

Consulte http://www.json.org/js.html para obter mais informações, lá você também pode encontrar um analisador JSON para navegadores mais antigos que não suportam o objeto JSON nativamente.

No seu caso:

var array = [];
$("input[class=email]").each(function() {
    array.push({
        title: $(this).attr("title"),
        email: $(this).val()
    });
});
// then to get the JSON string
var jsonString = JSON.stringify(array);
ChrisF
fonte
10

Pode ser que isso ajude, eu prefiro JS puro sempre que possível, ele melhora o desempenho drasticamente, pois você não terá muitas chamadas de função JQuery.

var obj = [];
var elems = $("input[class=email]");

for (i = 0; i < elems.length; i += 1) {
    var id = this.getAttribute('title');
    var email = this.value;
    tmp = {
        'title': id,
        'email': email
    };

    obj.push(tmp);
}
Salman
fonte
Big + 1 foi com essa solução, a resposta aceita me causou alguns problemas no IE
Bobadevv
0

o mesmo exemplo acima - se você está apenas procurando json (não um array de objeto), use

function getJsonDetails() {
      item = {}
      item ["token1"] = token1val;
      item ["token2"] = token1val;
      return item;
}
console.log(JSON.stringify(getJsonDetails()))

esta saída será impressa como (um json válido)

{ 
   "token1":"samplevalue1",
   "token2":"samplevalue2"
}
Pravin
fonte