从粘贴的 JSON 转储动态自动完成表单答案

【问题标题】：Autocomplete form from pasted JSON dump dynamically从粘贴的 JSON 转储动态自动完成表单
【发布时间】：2016-03-01 17:26:16
【问题描述】：

我正在尝试创建一段代码，该代码将读取一段 JSON 并根据内容自动填充同一页面上的单独字段。我希望能够将一段 JSON 复制/粘贴到表单文本区域中，并从粘贴的 JSON 中填充单独的文本字段。

<form>
<textarea name="jsondump">Paste JSON here...</textarea>
<button type="button" name="populate">Populate</button> 
<input type="text" name="field1" value=""></input>
<input type="text" name="field2" value=""></input>
<input type="submit" value="Submit"></input>
</form>

因此，如果我粘贴了一段 JSON，例如：

{"field1": "Apple", "field2": "Orange"}

进入文本区域，单击填充按钮将解析 JSON 并更新文本输入。

（我知道将 JSON 直接从一个应用程序发送到另一个应用程序会容易得多，但是它们位于两个不同的服务器上，没有交互）。

我认为这应该可以使用 javascript，任何指针将不胜感激！

【问题讨论】：

我首先做了很多搜索，我能找到的所有结果都与从页面/db之间通过ajax/POST等作为参数传递的JSON字符串填充表单有关，没有什么可以在同一页面上快速提取变量。
只需将帖子更改为 JSON 的返回即可。文档使用一个简单的数组：jqueryui.com/autocomplete/#default 作为默认操作

标签： javascript html json forms

【解决方案1】：

您可以使用诸如把手或下划线之类的模板语言从数据中填充标记。

这里是一个简单的例子，说明如何简单地使用下划线和 jquery 来做到这一点。

JSbin demo

JS：

var template = _.template(
  $( "script.template" ).html()
);

$('.form__btn').on('click', function(e){
    var data = $('.form__json').val();
    try {
        data = JSON.parse(data);
    }
    catch (e){
        console.log(data + " is not valid JSON");
        return;
    }
    $('.form__inner').html(template(data));
});

HTML

  <div class="form">
    <textarea name="jsondump" class="form__json">Paste JSON here...</textarea>
    <button type="button" name="populate" class="form__btn">Populate</button> 
    <div class="form__inner"></div>
  </form>

  <script type="text/template" class="template">
    <form>
      <input type="text" name="field1" value="<%= field1 %>"></input>
      <input type="text" name="field2" value="<%= field2 %>"></input>
      <input type="submit" value="Submit"></input>
    </form>
  </script>

请注意，这适用于您粘贴的示例

{"field1": "Apple", "field2": "Orange"}

【讨论】：