Динамическое создание JSON с каждым входным значением с помощью jquery

91

У меня возникла ситуация, когда я хотел бы прочитать некоторые данные из формата JSON через PHP, однако у меня возникли некоторые проблемы с пониманием того, как я должен создать объект Javascript для динамического создания формата JSON.

Мой сценарий таков:

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

Код Javascript, который у меня есть до сих пор, проходит через каждый ввод, захватывает данные, однако я не могу понять, как обрабатывать с этого момента.

var taskArray = {};

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

  //how to create JSON?

});

Если возможно, я бы хотел получить следующий результат.

[{title: QA, email: 'a@a.com'}, {title: PROD, email: 'b@b.com'},{title: DEV, email: 'c@c.com'}]

Где адрес электронной почты получен значением поля ввода.

БеконСок
источник

Ответы:

274

Как это:

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

Объяснение

Вы ищите an array of objects. Итак, вы создали пустой массив. Создайте объект для каждого input, используя в качестве ключей «заголовок» и «адрес электронной почты». Затем вы добавляете каждый из объектов в массив.

Если вам нужна строка, сделайте

jsonString = JSON.stringify(jsonObj);

Пример вывода

[{"title":"QA","email":"a@b"},{"title":"PROD","email":"b@c"},{"title":"DEV","email":"c@d"}] 
АТОзТОА
источник
Почему в этих трех примерах я всегда получаю это? 'Uncaught ReferenceError: jsonObj is not defined'
Джино
@Gino Вы скопировали, вставили или напечатали? См. Строку, определяющую jsonObj.
ATOzTOA
15

Я не думаю, что вы можете превратить объекты JavaScript в строки JSON, используя только jQuery, если вам нужна строка JSON в качестве вывода.

В зависимости от браузеров, на которые вы ориентируетесь, вы можете использовать JSON.stringifyфункцию для создания строк JSON.

См. Http://www.json.org/js.html для получения дополнительной информации, там вы также можете найти парсер JSON для старых браузеров, которые не поддерживают объект JSON изначально.

В твоем случае:

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
источник
10

Возможно, это поможет, я бы предпочел чистый JS везде, где это возможно, это значительно улучшает производительность, поскольку у вас не будет много вызовов функций 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 пошел с этим решением, принятый ответ вызвал у меня некоторые проблемы в IE
Bobadevv
0

то же самое из приведенного выше примера - если вы просто ищете json (а не массив объектов), просто используйте

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

этот вывод будет напечатан как (действительный json)

{ 
   "token1":"samplevalue1",
   "token2":"samplevalue2"
}
Правин
источник