在JavaScript中循环动态数据追加

Question

我正在尝试使用jQuery在我的视图中添加动态字段，并且正在工作，我要解决的问题是加载我的动态数据，由jQuery附加。

这是我的代码：

$(document).ready(function() {
  $("#add").click(function() {
    var loopsData = [
      @foreach($attributes as $attribute) {
        value: '{{ $attribute->id }}',
        text: '{{ $attribute->title }}'
      }
      @unless($loop - > last),
      @endunless
      @endforeach
    ];

    console.log(loopsData);

    var lastField = $("#buildyourform div:last");
    var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
    var fieldWrapper = $("<div class=\"col-md-12 mt-20\" id=\"field" + intId + "\"/>");
    fieldWrapper.data("idx", intId);
    var fName = $("<label for=\"title\">Title</label><input type=\"text\" name=\"title[]\" class=\"form-control\" />");
    var fType = $("<label for=\"attribute_id\">Parent</label><select name=\"attribute_id\" id=\"attribute_id\" class=\"form-control\"><option value=\"\">Select</option><option value=" + loopsData['value'] + ">" + loopsData['text'] + "</option></select>");
    var removeButton = $("<input type=\"button\" class=\"btn btn-xs btn-danger\" value=\"-\" />");
    removeButton.click(function() {
      $(this).parent().remove();
    });
    fieldWrapper.append(fName);
    fieldWrapper.append(fType);
    fieldWrapper.append(removeButton);
    $("#buildyourform").append(fieldWrapper);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buildyourform">
  <div class="col-md-12 mt-20">
    Title
    <input type="text">
  </div>
  <div class="col-md-12 mt-20">
    Parent
    <select name="attribute_id" id="attribute_id" class="form-control">
      <option value="">Select</option>
      @foreach($attributes as $attribute)
      <option value="{{$attribute->id}}">{{$attribute->title}}</option>
      @endforeach
    </select>
  </div>
</div>
<!-- buttons -->
<input type="button" value="Add a field" class="add" id="add" />
<!-- buttons -->

问题

1. 当我使用console.log(loopsData);时，它会正确返回我的数据。
2. 但是我的形式是说undefined

我认为我需要在此部分使用$each：

<option value="+loopsData['value']+">"+loopsData['text']+"</option>

但是当我使用它时，我得到了语法错误。

想要帮助

我需要您的帮助来循环代码而不出现语法错误吗？

谢谢。

Answer 1

已解决

这是我如何解决我的问题的方法，这要归功于那些甚至没有试图提供帮助的人！

首先，我在脚本中添加了此代码：

var loopsData = [
    @foreach($attributes as $attribute)
        { value: '{{ $attribute->id }}', text: '{{ $attribute->title }}' }
        @unless ($loop->last)
            ,
        @endunless
    @endforeach
];

var helpers = '';
$.each(loopsData, function(key, value) {
  helpers += '<option value="'+value.value+'">'+value.text+'</option>';
});

然后我将附加部分更改为使用helpers var而不是选项html代码。

<select name=\"attribute_id[]\" id=\"attribute_id\" class=\"form-control\"><option value=\"\">Select</option>"+helpers+"</select>

这里是完整代码：

    $(document).ready(function() {
        $("#add").click(function() {

//my data from controller
            var loopsData = [
                @foreach($attributes as $attribute)
                    { value: '{{ $attribute->id }}', text: '{{ $attribute->title }}' }
                    @unless ($loop->last)
                        ,
                    @endunless
                @endforeach
            ];
    //looping my data in jQuery and return result as option html
            var helpers = '';
            $.each(loopsData, function(key, value) {
              helpers += '<option value="'+value.value+'">'+value.text+'</option>';
// += will add new option to my select box for each one of my loop data
            });

//add it to my code
            var lastField = $("#buildyourform div:last");
            var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
            var fieldWrapper = $("<div class=\"col-md-4 mt-20\" id=\"field" + intId + "\"/>");
            fieldWrapper.data("idx", intId);
            var fName = $("<label for=\"title\">Title</label><input type=\"text\" name=\"title[]\" class=\"form-control\" />");
            var fType = $("<label for=\"attribute_id\">Parent</label><select name=\"attribute_id[]\" id=\"attribute_id\" class=\"form-control\"><option value=\"\">Select</option>"+helpers+"</select>");
            var removeButton = $("<button type=\"button\" class=\"btn btn-danger\"><i class=\"fa fa-minus\"></i></button>");
            removeButton.click(function() {
                $(this).parent().remove();
            });
            fieldWrapper.append(fName);
            fieldWrapper.append(fType);
            fieldWrapper.append(removeButton);
            $("#buildyourform").append(fieldWrapper);
        });
    });

希望它对其他人有帮助。