如何将 Laravel foreach 放入 JS 文件中？

Question

I have this select-box I just add it via jQuery :

<span onclick="createProduct()">Add New<i class="fa fa-plus"></i></span>

<script>

function createProduct() {
        var html = '';
        html += '   <div class="col-xs-12">';
        html += '      <div class="form-group">';
        html += '          <div class="input-group">';
        html += '               <span class="input-group-addon input-group-addon-small"><i class="sicon-tag-special"></i></span>';
        html += '               <select class="form-control" name="category_id" style="width: 100%">';
        html += '                  <option value="">Select Category.. </option>';
        html += '                  <option value="">Category1</option>';
        html += '                  <option value="">Category2</option>';
        html += '               </select>';
        html += '          </div>';
        html += '       </div>';
        html += '    </div>';

     $('#products_div').prepend(html);
 }

</script>

Here when the Admin clicks on the add new button, a select element is added in the page. My problem is with creating the the options in the select element. I have this foreach I need to put it into this js code!

@foreach($categories as $category)
    <option value="{{ $$category->id }}">{{ $category->name }}</option>
@endforeach

Answer 1

In this case, as the HTML you want to append is governed by the content coming from your Laravel back end, it would make far more sense to de-couple the HTML and the JS. As such, create the HTML in the DOM when the page loads and hide it. Then in the JS you can clone that HTML and append it where it is required to be displayed. Something like this:

 $('.add-new-product').on('click', function() { var $clone = $('#new-product-content > div').clone(); $clone.appendTo('#products-div'); });

 #new-product-content { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="add-new-product">Add New<i class="fa fa-plus"></i></span> <div id="products-div"></div> <div id="new-product-content"> <div class="col-xs-12"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon input-group-addon-small"><i class="sicon-tag-special"></i></span> <select class="form-control" name="category_id" style="width: 100%"> <option value="">Select Category...</option> <!-- output your categories here, eg. @foreach($categories as $category) <option value="{{ $$category->id }}">{{ $category->name }}</option> @endforeach Below is just for demo purposes... --> <option value="lorem">Lorem</option> <option value="ipsum">Ipsum</option> <option value="dolor">Dolor</option> <option value="sit">Sit</option> </select> </div> </div> </div> </div>

Also note the use of unobtrusive event handlers here. Using inline event handlers in your HTML, such as onclick etc., is bad practice and should be avoided where possible.

Answer 2

You could do something like this:

function createProduct() {
  // Echo the JSON for the options in your JS
  var options =  @json($categories);
  // Map options to their HTML version, and join them
  var optionsHtml = options.map(function (opt) {
    return '<option value="' + opt.id + '">' + opt.name + '</option>';
  }).join('');

  var html = '   <div class="col-xs-12">'
           + '      <div class="form-group">'
           + '          <div class="input-group">'
           + '               <span class="input-group-addon input-group-addon-small"><i class="sicon-tag-special"></i></span>'
           + '               <select class="form-control" name="category_id" style="width: 100%">'
           + '                  <option value="">Select Category.. </option>'
           +                    optionsHtml // Add them here
           + '               </select>'
           + '          </div>'
           + '       </div>'
           + '    </div>';

     $('#products_div').prepend(html);
 }