时间戳

首页 > 解决方案 > 如何将 DOM 数据转换为 json

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

问题描述

我的文档中有一些输入，例如下面的代码段。我想根据名称和值从所有输入中创建一个字符串或 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"}

标签： javascriptjqueryarrays

解决方案

其背后的原因是您使用的是数组和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>

推荐文章：使用 MDN 中的对象

我希望这会有所帮助！

推荐阅读