遍历 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

你在你的 javascript 方法中使用了 laravel 的 form 外观，Laravel 外观在处理后的网页被传递给客户端之前在服务器上执行。

由于你是在客户端循环通过js，form facade 会被渲染为纯文本，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>`
    }

Answer 2

到目前为止我有这个。我似乎无法将它们放入输入字段的值中。这是代码。当我执行 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>'
            );
        });
    }