Конвертировать объект в HTML-ввод в JQuery или JavaScript

Question

У меня есть объект, как показано ниже.Есть ли способ преобразовать это в ввод HTML отдельно в jQuery или JavaScript?

Объект:

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

Ожидаемый вывод HTML:

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

Answer 1

В конце концов, мы одна семья, так что это код для вас.

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>

Answer 2

Вы можете использовать основной цикл для массива объектов и внутренний цикл, который проходит по всем ключам:

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>

Answer 3

Используйте append для добавления значений и Object.keys для получения ключей и соответствующих значений от объекта

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>