Hice esta pregunta una vez, pero no pude obtener ninguna respuesta adecuada. Entonces, simplifico la pregunta. Estoy usando codeigniter
función javascript en el archivo de vista aquí la salida abc se ve así
0:{a:'1',b:'2',c:'35'} 1:{a:'2',b:'3',c:'34'} 2:{a:'5',b:'1',c:'87'} 3:{a:'4',b:'3',c:'90'}
function test() { const show_div = document.getElementById('div_show'); const abc =[]; abc.push({a,b,c}); for (const data of abc){ const values = Object.values(data); for (const value of values){ const input = document.createElement( '<input type="text" name="a[]" value=" '+ value[0]+ ' " required>' + '<input type="text" name="b[]" value=" '+ value[1]+ ' " required>' + '<input type="text" name="c[]" value=" '+ value[2] + ' " required>' ); input.innerText = value ; show_div .appendChild( input ); } } }
Necesito llevar esto a la vista
<form> //there are more divs here <div id='div_show'> //need output like this // 1 2 35 // 2 3 34 // 5 1 87 // 4 3 90 </div> </form>
Y luego quiero pasar datos a, b, c al modelo. ¿Cómo puedo obtener estos datos? En realidad, estoy creando esta salida de vista, simplemente pase los datos en el método de publicación porque en el formulario se envían los datos a través de la URL de acción sin ajax.
Puedes probar así. Puede agregar cualquier campo de entrada con la matriz de datos de objeto. He separado cada elemento de la matriz con un div para que pueda diseñarlo con css o puede eliminarlo si no necesita el div.
const data = [{a:'1',b:'2',c:'35'}, {a:'2',b:'3',c:'34'}, {a:'5',b:'1',c:'87'}, {a:'4',b:'3',c:'90'}]; function show() { const container = document.getElementById("div_show"); let fields = ''; for(item of data) { fields += '<div class="field_row">'; Object.keys(item).forEach( key => { fields += `<input type="text" name="${key}[]" value="${item[key]}" required>` }) fields += '</div>'; } container.innerHTML = fields; } show()
<form><div id="div_show"></div></form>
Tipo de manera ES6
const data = [{a:'1',b:'2',c:'35'},{a:'2',b:'3',c:'34'},{a:'5',b:'1',c:'87'},{a:'4',b:'3',c:'90'}]; function show() { const fields = data.map((obj) => { const row = Object.entries(obj) .map(([key, value]) =>`<input type="text" name="${key}-${value}" value="${value}">`) .join(''); return `<div>${row}</div>`; }).join(''); document.getElementById("div_show").innerHTML = fields; } show();
<form><div id="div_show"></div></form>
¿Puede proporcionar detalles más específicos de su salida exacta? Si necesita solo 3 elementos de entrada en el lado de div(#div_show)
, su ciclo interno es redundante, puede eliminarlo y le dará lo que necesita.