Convert object to HTML Input in JQuery or JavaScript

Question

I have an object as below. Is there any way to convert this to HTML inputs separately in jQuery or JavaScript?

Object:

{
  "OrderID": 110,
  "TKOrderStatus": 61,
  "Description": "Order Updated",
  "IsActive": true,
  "IsDeleted": false,
  "IPAddress": "::1",
  "CreatedAt": "\/Date(1568972577698)\/",
  "ID": 0
}

Expected HTML output:

<input type="text" name="OrderID" value="110" />
<input type="text" name="TKOrderStatus" value="61" />
<input type="text" name="Description" value="Order Updated" />
<input type="text" name="IsActive" value="true" />
<input type="text" name="IsDeleted" value="false" />
<input type="text" name="IPAddress" value="::1" />
<input type="text" name="CreatedAt" value="\/Date(1568972577698)\/" />
<input type="text" name="ID" value="0" />

Actually I don't know approach. I try to find a solution way — Fatih
– Fatih, Commented Sep 26, 2019 at 6:51
Just FYI, you've got an object there, not JSON. I've amended the question as such. — Rory McCrossan
– Rory McCrossan, Commented Sep 26, 2019 at 7:35

Ankit Agarwal · Accepted Answer · 2019-09-26 06:54:43Z

You can use a main loop on array of objects and a inner loop that loops through all the keys:

jQuery

let orderArr = [{
    "OrderID": 110,
    "TKOrderStatus": 61,
    "Description": "Order Updated",
    "IsActive": true,
    "IsDeleted": false,
    "IPAddress": "::1",
    "CreatedAt": "\/Date(1568972577698)\/",
    "ID": 0
  },
  {
    "OrderID": 120,
    "TKOrderStatus": 62,
    "Description": "Order Updated new",
    "IsActive": true,
    "IsDeleted": false,
    "IPAddress": "::2",
    "CreatedAt": "\/Date(1568972577000)\/",
    "ID": 0
  }
];
orderArr.forEach(function(order) {
  Object.keys(order).forEach((key) => {
    $('#container').append('<input type="text" name=' + key + ' value=' + order[key] + '>')
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

JavaScript

let orderArr = [{
    "OrderID": 110,
    "TKOrderStatus": 61,
    "Description": "Order Updated",
    "IsActive": true,
    "IsDeleted": false,
    "IPAddress": "::1",
    "CreatedAt": "\/Date(1568972577698)\/",
    "ID": 0
  },
  {
    "OrderID": 120,
    "TKOrderStatus": 62,
    "Description": "Order Updated new",
    "IsActive": true,
    "IsDeleted": false,
    "IPAddress": "::2",
    "CreatedAt": "\/Date(1568972577000)\/",
    "ID": 0
  }
];
orderArr.forEach(function(order) {
  Object.keys(order).forEach((key) => {
    document.getElementById('container').innerHTML += ('<input type="text" name=' + key + ' value=' + order[key] + '>')
  });

})

<div id="container"></div>

Joven28 · Accepted Answer · 2019-09-26 06:52:59Z

3

In the end, we are one family, so this is the code for you.

const obj = {
  "OrderID": 110,
  "TKOrderStatus": 61,
  "Description": "Order Updated",
  "IsActive": true,
  "IsDeleted": false,
  "IPAddress": "::1",
  "CreatedAt": "\/Date(1568972577698)\/",
  "ID": 0
};

const wrapper = document.getElementById('wrapper');
for(const key in obj) {
  const input = document.createElement('input');
  input.setAttribute('name', key);
  input.value = obj[key];
  wrapper.appendChild(input);
}

<div id="wrapper"></div>

answered Sep 26, 2019 at 6:52

Joven28

7693 silver badges12 bronze badges

Comments

ellipsis · Accepted Answer · 2019-09-26 06:59:16Z

3

Use append to append the values and Object.keys to get the keys and corresponding values from the object

var a={
  "OrderID": 110,
  "TKOrderStatus": 61,
  "Description": "Order Updated",
  "IsActive": true,
  "IsDeleted": false,
  "IPAddress": "::1",
  "CreatedAt": "\/Date(1568972577698)\/",
  "ID": 0
};
Object.keys(a).forEach(function(e){
$('#q').append('<input type="text" name='+e+' value='+a[e]+'>')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="q"></div>

edited Sep 26, 2019 at 6:59

answered Sep 26, 2019 at 6:51

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

Collectives™ on Stack Overflow

Convert object to HTML Input in JQuery or JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related