如何传递对象列表以在输入字段中动态查看和填充它们答案

【问题标题】：How to pass an list of objects to view and populate them in input fields dynamically如何传递对象列表以在输入字段中动态查看和填充它们
【发布时间】：2020-10-12 14:20:26
【问题描述】：

我使用 Spring 模型属性将列表对象传递给视图。在视图中，我尝试使用 jquery 动态填充一组输入，如下所示：

从控制器传递列表：

  List<String> supplierNames = Arrays.asList("address1", "address2", "address3");
  model.addAttribute("consumerAddresses", supplierNames);

查看（jsp）：

<div class="input_fields_wrap">
   <div><input type="text" id='label1'><input type="text" id='address1'></div>
</div>

<script>
$(document).ready(function() {

    var consumerAddresses = "${consumerAddresses}";
    var max_fields      = 10; 
    var wrapper         = $(".input_fields_wrap"); 

    for (i = 0; i < consumerAddresses.length; i++) {
         $(wrapper).append('<div><input type="text" id="label' + i + '" value=' + consumerAddresses[i] + '/><input type="text" 
         id="address' + i + '" value=' + consumerAddresses[i] + '/></div>');
    }

  });
</script>

现在的问题是消费者地址作为数组 [address1, address2, address3] 传递，但在输入字段中，它同样填充为 [/ a/ d/。这里出了什么问题？

【问题讨论】：

标签： javascript java jquery spring

【解决方案1】：

在consumerAddresses 中你没有数组，它是一个字符串。然后，当您尝试对其进行迭代时，您只需从中获取一些字符。您需要在遍历字符串之前将其转换为数组。在这种情况下，您可以使用split 方法。

var consumerAddressesArray = consumerAddresses.replace(/[[\]']+/g,'').split(", ");

完成此操作后，您将拥有

[
"address1",
"address2",
"address3"
]

在您的 consumerAddressesArray 变量中。

并确保您已修剪所有基本字符。我的意思是[、（空格）、]。在我的示例中，我为此使用了正则表达式 (.replace(/[[\]']+/g,''))。它将用空字符串替换方括号。

【讨论】：

感谢您的回答。有没有办法做到这一点而不分裂这个？我的意思是，我不能从模型属性传递的 javascript 访问原始列表吗？

【解决方案2】：

您可以在某个 jsp 变量中获取 spring mvc 返回的值，然后在 jsp 中使用 for-loop 来遍历该列表，即：

<%
 //get value in jsp variable
 //i.e :request.getAttribute("consumerAddresses");
 //here  i assumme consumerAddresses is variable in jsp which has that arry value
 for(int x=0;x<consumerAddresses.length;x++) {%>
  
         $(wrapper).append('<div><input type="text" id="label<%=x%>" value='<%=consumerAddresses[x]%>'/>
         <input type="text" id="address<%=x%>" value='<%=consumerAddresses[x]%>'/></div>');
<%}%>

注意：以上代码未经测试，可能有一些语法错误。另外，您可以使用 jstl 来做同样的事情。

【讨论】：