Как преобразовать данные 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>

Предлагаемая статья: Работа с объектами из MDN

Надеюсь, это поможет!

Answer 2

Попробуйте использовать приведенный ниже код.

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

Answer 3

Существует 2 стандартных способа мгновенного получения всех данных формы. Надеюсь, это поможет вам.

var formData = $('form').serialize();
console.log(formData)

var formDataArray = $('form').serializeArray();
console.log(formDataArray)

<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>