Как поместить Laravel foreach внутри JS файла?

Question

У меня есть select-box Я просто добавляю его через 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>

Здесь, когда администратор нажимает кнопку add new, на страницу добавляется элемент выбора. Моя проблема с созданием опций в элементе select. У меня есть этот foreach, мне нужно поместить его в этот js код!

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

Answer 1

В этом случае, поскольку HTML, который вы хотите добавить, зависит от содержимого, поступающего с вашего Laravel бэкэнда, было бы гораздо разумнее разделить HTML и JS. Таким образом, создайте HTML в DOM, когда страница загрузится, и скройте его. Затем в JS вы можете клонировать этот HTML и добавить его туда, где он должен быть отображен. Как то так:

$('.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>

Также обратите внимание на использование ненавязчивых обработчиков событий здесь. Использование встроенных обработчиков событий в HTML, таких как onclick et c., Является плохой практикой, и ее следует по возможности избегать.

Answer 2

Вы можете сделать что-то вроде этого:

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