从粘贴的JSON转储动态自动填充表格

我想创建一段代码，它将读取一段JSON并自动填充内容中同一页上的单独字段。我希望能够将一大块JSON复制/粘贴到表单textarea中，并从粘贴的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"}

到textarea的，点击按钮，填入将解析JSON和更新文本输入。（我知道将JSON直接从一个应用程序发送到另一个应用程序会更容易，但是他们坐在两个不同的服务器上，没有任何交互）。

我认为这应该是可能的JavaScript，任何指针将不胜感激！

来源

2016-03-01 x00x20

欢迎所以你所示例粘贴。请访问[帮助]了解如何以及要问什么。提示：首先浏览一下：https://www.google.com/search?q=autocomplete+from+JSON – mplungjan

我做了很多搜索，我可以找到的所有结果都与填充表单有关一个JSON字符串作为参数通过页面/数据库之间的ajax/POST等进行传递，没有任何东西可以在同一页面上快速提取变量。 – x00x20

只需将帖子更改为JSON的返回。该文档使用一个简单的数组：https://jqueryui.com/autocomplete/#default默认操作 – mplungjan

您可以使用模板语言（如句柄或下划线）来填充数据中的标记。

这是一个简单的例子，简单地用下划线和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"}

来源

2016-03-01 17:44:40 OllieH

绝对完美！非常感谢。 – x00x20

从粘贴的JSON转储动态自动填充表格

回答

相关问题