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: 'a@a.com'}, {title: PROD, email: 'b@b.com'},{title: DEV, email: 'c@c.com'}]

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

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"}] 

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);

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);
}

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"
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.