Converting JSON to HTML with jQuery jPut

Question

I'm studying jQuery jPut JSON to HTML, but while learning this plugin, I got stuck trying to convert some JSON data to HTML.

I've provided a sample of my JSON data. How do I convert this into HTML? I haven't been able to 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's 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>

2

What is error showing? – user3797053 Dec 10 '14 at 11:55

score 3 · Answer 1 · answered Dec 10 '14 at 11:59

The problem is with your json. The json is not valid.

Always try to check your json is valid or not. You can check your json is valid or not in this site http://jsonlint.com/.

Your json is not valid because there is * near **"author": { Please remove that *. It will work fine.

Converting JSON to HTML with jQuery jPut

1 Answers1