CODEWITHSUNDEEP
javascriptjqueryarrays
hamed dehghan
hamed dehghan

Reputation: 599

How to convert DOM data into a json

I have some inputs inside my document like snippet code bellow. I want to make an string or JSON from all inputs per their name and value.

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>

This is the result I get:

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

But the thing I want is something like this:

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

Upvotes: 0

Views: 112

Answers (3)

SerzN1
SerzN1

Reputation: 1894

There are 2 standard methods to get all the form data instantly. Hope it will help you. 

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>

Upvotes: 1

norbitrial
norbitrial

Reputation: 15166

The reason behind that is you are using an array and push(). Instead you can operate with an empty object {}.

So you can add properties to that object, instead using push into an array, like the following:

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>

Suggested article: Working with objects from MDN

I hope that helps!

Upvotes: 2

Nikhil Goyal
Nikhil Goyal

Reputation: 1973

Try using the below code.

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

Upvotes: 1

Related Questions