使用 jQuery jPut 将 JSON 转换为 HTML答案

【问题标题】：Converting JSON to HTML with jQuery jPut使用 jQuery jPut 将 JSON 转换为 HTML
【发布时间】：2014-11-18 11:06:08
【问题描述】：

我正在研究 jQuery jPut JSON to HTML，但是在学习这个插件时，我在尝试将一些 JSON 数据转换为 HTML 时遇到了困难。

我提供了我的 JSON 数据示例。如何将其转换为 HTML？我还没找到解决办法。

{
    "info":[
    {
    "headername": "json-table",
    "title": "json-table",
    "description": "jQuery plugin for rendering custom tables from JSON data.",
    "keywords": ["table", "json", "ui"],
    "version": "0.1.3",
    **"author": {
        "authorname": "Klaus Ganser",
        "url": "http://kganser.com"
    }**,
    "maintainers": [{
        "assname": "Klaus Ganser",
        "url": "http://kganser.com"
    }],
    "licenses": [{
        "type": "MIT",
        "url": "http://opensource.org/licenses/MIT"
    }],
    "bugs": "https://github.com/kganser/json-table/issues",
    "homepage": "http://kganser.com/json-table.html",
    "docs": "http://kganser.com/json-table.html",
    "dependencies": {
        "jquery": ">=1.0"
        }
    }]
}

这是我的 HTML 文件：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jput.min.js"></script>
<script>    
    $(document).ready(function(){

//The div you want to upload    
    $('#detailsShow').jPut({
        dataName:'info',
        ajax_url:'json-table.jquery.json',
        ajax_type:'post',
        prepend:true,
        name:'details',     //jPut Template name
        error:function(msg)
        {
            alert(msg);
        }
    }); 


    });
    </script>
</head>

<body>
    <!--jPut HTML Template (it will he hidden)-->
    <div jput="details">
        <h3>{{headername}}</h3>
        <ul>
            <li>Title: {{title}}</li>
            <li>Description: {{description}}</li>
            <li>Keywords: {{keywords}}</li>
            <li>Version: {{version}}</li>
            <li><a href="{{url}}">{{authorname}}</a></li>
        </ul>
    </div>

    <div id="detailsShow"></div>
</body>
</html>

【问题讨论】：

显示什么错误？

标签： jquery json jquery-plugins

【解决方案1】：

问题在于您的 json。 json 无效。

始终尝试检查您的 json 是否有效。您可以在此站点http://jsonlint.com/ 中检查您的 json 是否有效。

您的 json 无效，因为 **"author": { 附近有 * 请删除该 *. 它会正常工作的。

【讨论】：