Json not working at button click?

Question

JSON not working.This is the code below.

ajax.aspx file:-

 <form id="form1" runat="server">
    <div id="dictionary">
</div>
 <div class="letters">
<div class="button" id="letter-a">
<h3>A</h3>
<button type="button">Load</button> 
</div>
<div class="button" id="letter-b">
<h3>B</h3>
<button type="button">Load</button> 
</div>
<div class="button" id="letter-c">
<h3>C</h3>
<button type="button">Load</button> 
</div>
<div class="button" id="letter-d">
<h3>D</h3>
<button type="button">Load</button> 
</div>
</div>
</form>

This is b.json file:_

[
{
"term": "BACCHUS",
"part": "n.",
"definition": "A convenient deity invented by the ancients as an
excuse for getting drunk.",
"quote": [
"Is public worship, then, a sin,",
"That for devotions paid to Bacchus",
"The lictors dare to run us in,",
"And resolutely thump and whack us?"
],
"author": "Jorace"
},
{
"term": "BACKBITE",
"part": "v.t.",
"definition": "To speak of a man as you find him when he can't
find you."
},
{
"term": "BEARD",
"part": "n.",
"definition": "The hair that is commonly cut off by those who
justly execrate the absurd Chinese custom of shaving the head."
},
]

ajax.js file:-

$(document).ready(function () {
    $('#letter-a button').click(function () {
        $('#dictionary').load('html_ajax.htm');
        alert('Loaded!');
    });
    $('#letter-b button').click(function () {
        $.getJSON('b.json', function (data) {
            $('#dictionary').empty();
            $.each(data, function (entryIndex, entry) {
                var html = '<div class="entry">';
                html += '<h3 class="term">' + entry['term'] + '</h3>';
                html += '<div class="part">' + entry['part'] + '</div>';
                html += '<div class="definition">';
                html += entry['definition'];
                if (entry['quote']) {
                    html += '<div class="quote">';
                    $.each(entry['quote'], function (lineIndex, line) {
                        html += '<div class="quote-line">' + line + '</div>';
                    });
                    if (entry['author']) {
                        html += '<div class="quote-author">' + entry['author'] +
'</div>';
                    }
                    html += '</div>';
                }
                html += '</div>';
                html += '</div>';
                $('#dictionary').append($(html));
            });




        });
    });
});

Click on Button A is working but B isn't.I am newbie to Ajax stuff.So i hope i am missing something.

Where could be the error.

Thanks

Answer 1

your b.json file according to jsonlint is not valid. You should remove the last comma to make it valid.