Сборка JSON Исходя из этого требования, можно использовать jQuery !!!Вызов!

Question

Я не уверен, как написать этот JS, поэтому попросите помощи здесь!

HTML

<div class="grid_18" id="reference_container">
    <div class="grid_16">
        <fieldset>
            <legend>Website</legend>

            <span class="grid_2">Person</span>
            <input name="person" class = "grid_6" type="text" />

            <span class="push_2">Year</span>
            <input class="push_2" name="year" type="text" />
        </fieldset>
    </div>

    <div class="grid_16">
        <fieldset>
            <legend>Newspaper</legend>

            <span class="grid_2">Author</span>
            <input name="author" type="text" />

            <span class="push_4">Year</span>
            <input class="push_4" name="year" type="text" />

        </fieldset>
    </div>
</div>

Мне нужен список JSON по одному для каждого набора полей. Результат будет выглядеть так:

[
    {type:"website"     , person: "(Based on user input)", year: "(Based on user input)"},
    {type:"Newspaper", author: "(Based on user input)", year: "(Based on user input)" }
]

(тип статический, контент взят из легенды, другие поля не совпадают)

Следует отметить, что имя поля не является статичным (человек, автор и т. Д.), Его нужно выбрать из атрибута имени.

Это выглядит проблемой для меня, надеюсь, кто может помочь с этим ~

Answer 1

var json = JSON.stringify($('fieldset').map(function () {
  var self = $(this);
  var obj = {
    type: self.children('legend').text()
  };

  // Find each input element with a name attribute, and add the name/val to the object
  self.find('input[name]').each(function () {
    obj[this.name] = this.value + " (Based on user input)";
  });

  // Return the object we've constructed
  return obj;
}).get());

map: Выполняет предоставленную функцию для каждого сопоставленного элемента и возвращает новый объект jQuery, элементы которого являются возвращаемым значением функции для каждого элемента.

get: Возвращает объект jQuery в виде массива.

Обязательно включите библиотеку JSON из https://github.com/douglascrockford/JSON-js, для поддержки браузеров, которые не включают библиотеку JSON.

Answer 2

У меня есть решение, которое не требует json2.js .Он использует метод jQuery serialize() и заменяет символы строки запроса на допустимые разделители JSON:

var arr = [];

$("fieldset").each(function () {
    var $this = $(this),
        serialized = $this.children("input").serialize(),
        type = $this.children("legend").text();

    // Replace the jQuery-serialized content into valid JSON
    serialized = serialized.replace(/([^=]+)=([^&]*)(&)?/g, function ($0, name, val, amp) {
        return '"'+name+'":'+'"'+val+'"' + (amp ? "," : "");
    });

    // Add it to the array
    arr.push('{"type":"'+type+'",'+serialized+'}');
});

// Join the array into a valid JSON string
var json = "[" + arr.join(",") + "]";

Здесь есть рабочая демонстрация: http://jsfiddle.net/AndyE/ASrKN/

Обратите внимание, что это нене нужно повторно декодировать результат (например, если пользовательский ввод содержит символы, которые должны быть закодированы в URL), но вы, вероятно, захотите, чтобы они оставались закодированными, если вы все равно отправляете сообщение на сервер.