获取数组数据到输入字段

Question

我已经问过一次这个问题，但没有得到任何正确的 answer.So 使用 codeigniter simpler.Im 提出问题

javascript 查看文件中的函数这里的 abc 输出看起来像这样

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
                   
                            );
                       
                    
                    }
                  
                }

}

我需要将其显示在视图中

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

然后我想将a,b,c数据传递给模型我怎样才能得到这个 data.Actually 我创建这个视图输出只是在 post 方法中传递数据，因为在表单中提交它通过操作 url 传递数据而没有 ajax.

Answer 1

能否请您提供更具体的详细信息您的确切输出？如果你只需要 div(#div_show) 一侧的 3 个输入元素，你的内部循环是多余的，你可以消除它，它会给你你需要的东西。

Answer 2

你可以这样试试。您可以使用对象数据数组添加任何输入字段。我用 div 分隔每个数组项，这样你就可以用 css 设计它，或者如果你不需要 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>

Answer 3

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>

获取数组数据到输入字段

get array data into input fields

javascript

php

arrays

model-view-controller