将数组数据放入输入字段答案

【问题标题】：get array data into input fields将数组数据放入输入字段
【发布时间】：2022-01-10 05:26:04
【问题描述】：

我曾经问过这个问题，但没有得到任何正确的答案。所以让问题更简单。我正在使用 codeigniter

视图文件中的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 数据传递给模型我怎样才能得到这些数据。实际上，我创建这个视图输出只是在 post 方法中传递数据，因为在表单中提交它通过动作 url 传递数据而没有 ajax。

【问题讨论】：

标签： javascript php arrays model-view-controller

【解决方案1】：

你可以这样试试。您可以使用对象数据数组添加任何输入字段。我用 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()

&lt;form&gt;&lt;div id="div_show"&gt;&lt;/div&gt;&lt;/form&gt;

【讨论】：

谢谢你的回答。我怎样才能把这个值传递给模型。任何想法？？
您可以使用 on submit 方法从字段中获取所有值以发送 ajax 请求。

【解决方案2】：

一种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();

&lt;form&gt;&lt;div id="div_show"&gt;&lt;/div&gt;&lt;/form&gt;

【讨论】：

【解决方案3】：

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

【讨论】：

我再次编辑了问题。请查看@sp14