循环遍历 JSON 名称/值对字符串以填充编辑模式的表单输入字段值

Question

我正在尝试循环访问 json 名称/值对字符串并填充生成的输入字段值。希望此逻辑用于编辑模式。我觉得我快到了，但我只填充了两个字段。哦，输入字段以两个为一组(标题网址和网址本身)

//*编辑模式 *- 使用当前存储的 URL 填充输入字段

let wrapper = '#wrapper';
let urlJson = '{"Hello World": "www.google.com"rn}'
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的表单外观，在处理后的网页传递给客户端之前，Laravel外观在服务器上执行。

由于您在客户端循环使用 js，因此表单外观将呈现为纯文本，没有 php 函数将起作用，您需要写下标记而不是使用表单外观。

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

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