Convertir objeto a entrada HTML en JQuery o JavaScript

Question

Tengo un objeto como a continuación. ¿Hay alguna forma de convertir esto a entradas HTML por separado en jQuery o JavaScript?

Objeto:

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

Salida HTML esperada:

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

javascript jquery html

0

Fatih TAN 26 sep. 2019 a las 09:47

Answer 1

Puede usar un bucle principal en una matriz de objetos y un bucle interno que recorre todas las teclas:

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>

3

Ankit Agarwal 26 sep. 2019 a las 06:54

Answer 2

Al final, somos una familia, así que este es el código para usted.

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>

3

Joven28 26 sep. 2019 a las 06:52

Answer 3

Use append para agregar los valores y Object.keys para obtener las claves y los valores correspondientes del objeto

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>

3

ellipsis 26 sep. 2019 a las 06:59

Convertir objeto a entrada HTML en JQuery o JavaScript

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript