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" />
0
Fatih TAN
26 sep. 2019 a las 09:47
3 respuestas
La mejor respuesta
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
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
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
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.