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对象。

请务必包含https://github.com/douglascrockford/JSON-js中的JSON库，以支持不包含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编码的），但是如果您要发布到服务器，则可能希望这些字符保持编码状态

构建JSON基于此要求，可以使用jQuery！挑战！

2 个答案: