javascript - 如何将 DOM 数据转换为 json

Question

我的文档中有一些输入，例如下面的代码片段。我想根据所有输入的名称和值创建一个字符串或 JSON。

var arr= [];
$('ul li input').each(function(){    
    let name = $(this).attr('name');
    let value = $(this).val();
    arr.push({
        [name] : value 
    })
});   
console.log(arr)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div>
    <ul>
      <li>
        <input name="SyslogType" type="text" value="asd"/>
      </li>
      <li>
        <input name="timestamp_from" type="text" value="1398/10/03 00:00:00"/>
        <input name="timestamp_to" type="text" value="1398/10/03 00:00:00"/>      
      </li>
    </ul>
  </div>
</form>

这是我得到的结果:

[
  {
    "SyslogType": "asd"
  },
  {
    "timestamp_from": "1398/10/03 00:00:00"
  },
  {
    "timestamp_to": "1398/10/03 00:00:00"
  }
]

但我想要的是这样的:

{"SyslogType":"asd","timestamp_from":"1398/10/03 00:00:00","timestamp_to":"1398/10/12 00:00:00"}

Answer 1

其背后的原因是您正在使用数组和push()。相反，您可以使用空对象 {} 进行操作。

因此，您可以向该对象添加属性，而不是使用 push 到数组中，如下所示:

var obj = {};
$('ul li input').each(function(){    
    let name = $(this).attr('name');
    let value = $(this).val();
    obj[name] = value;
});   
console.log(obj)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div>
    <ul>
      <li>
        <input name="SyslogType" type="text" value="asd"/>
      </li>
      <li>
        <input name="timestamp_from" type="text" value="1398/10/03 00:00:00"/>
        <input name="timestamp_to" type="text" value="1398/10/03 00:00:00"/>      
      </li>
    </ul>
  </div>
</form>

推荐文章:Working with objects from MDN

希望对您有所帮助!