Geek Answers Handbook

Convert JSON to HTML using jQuery jPut

I am learning jQuery jPut JSON for HTML, but while studying this plugin, I am stuck trying to convert some JSON data to HTML.

I presented a sample JSON data. How to convert this to HTML? I could not find a solution.

{
    "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"
        }
    }]
}

Here is my HTML file:

<!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>
+4
source share
1 answer

Problem with your json. Json is not valid.

Always try to verify that your json is valid or not. You can verify that your json is valid or not on this site http://jsonlint.com/ .

Your json is invalid because there is * near **"author": { Remove this *. It will work fine.

+3
source

More articles:


All Articles