Циклически перебирает строку пары имя / значение JSON, чтобы заполнить значения поля ввода формы для режима редактирования

Question

Я пытаюсь перебрать строку пары имя / значение json и заполнить сгенерированные значения поля ввода.Желая эту логику для режима редактирования.Я чувствую, что почти там, но я только заполняю два поля.О, поля ввода находятся в группе из двух (URL-адрес заголовка и сам URL-адрес)

// * Режим редактирования * - Заполняет поля ввода текущими сохраненными URL-адресами

let wrapper = '#wrapper';
let urlJson = '{\"Hello World\": \"www.google.com\"\r\n}'

if (urlJson) {
  var result = $.parseJSON(urlJson);
  var urlTitle = $('[name="url_title[]"]');
  var url = $('[name="url[]"]');

  $.each(result, function(key, value) {
    console.log('key: ' + key + ' - value: ' + value);

    urlTitle.val(key);
    url.val(value);

    $(wrapper).append(
      '<div id="title_and_url_group"><br><hr class="title_and_url"><div class="col-md-9 title_and_url">' +
      '{!! Form::text("url_title", old("url_title"), ["class"=>"form-control", "name" => "url_title[]", "placeholder"=>"Title of URL"]) !!}' +
      '</div><br><div class="col-md-9 title_and_url">' +
      '{!! Form::text("url", old("url"), ["class"=>"form-control", "name" => "url[]", "placeholder"=>"Ex: http or https in url"]) !!}' +
      '<a href="#" title="Remove this field" class="remove_field text-danger float-right font-weight-bold p-1">X</a></div></div>'
    );
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="url_title[]" value="Bike"> URL Title<br>
<input type="checkbox" name="url[]" value="Car"> URL<br>
<div id="wrapper"></div>

Answer 1

Пока у меня есть это. Я не могу получить их в значения в полях ввода. Вот код Когда я делаю console.log, он повторяется правильно.

    // *** Edit mode *** - Populates url tile and url fields
    if (url) {
        var result = JSON.parse(url);
        var url_title = $('[name="url_title[]"]');
        var url = $('[name="url[]"]');

        $.each(result, function(key, value) {
         console.log('key: ' + key + ' - value: '  + value);

         url_title.val(key);
         url.val(value);

            $(wrapper).append(
                '<div id="title_and_url_group"><br><hr class="title_and_url"><div class="col-md-9 title_and_url">' + 
                '{!! Form::text("url_title", old("url_title"), ["class"=>"form-control", "name" => "url_title[]"]) !!}' +
                '</div><br><div class="col-md-9 title_and_url">' +
                '{!! Form::text("url", old("url"), ["class"=>"form-control", "name" => "url[]"]) !!}' +
                '<a href="#" title="Remove this field" class="remove_field text-danger float-right font-weight-bold p-1">X</a></div></div>'
            );
        });
    }

Answer 2

Вы используете фасад формы laravel в своем методе javascript, фасад Laravel выполняется на сервере перед передачей обработанной веб-страницы клиенту.

Поскольку вы просматриваете js на клиенте, фасад формы будет отображаться как обычный текст, функция php работать не будет, вам нужно будет записать разметку вместо использования Form Facade.

    Document.querySelector('#wrapper').innerHTML =
    result.forEach((res, index)=>{
      `<div id="title_and_url_group">
          <br>
          <hr class="title_and_url">
          <div class="col-md-9 title_and_url">
            <input type="text" name="url_title[${index}]" value="${res.url_title}" class="form-control">
          </div>
          <br>
          <div class="col-md-9 title_and_url">
            <input type="checkbox" name="url[${index}]" value="${res.url}" class="form-control">
            <a href="#" title="Remove this field" class="remove_field text-danger float-right font-weight-bold p-1">X</a>
          </div>`
    }