Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    64
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question jquery + .json doesn't work

    json doesn't work, i have an example.
    can you kindly check what's wrong with this ?

    here's the html first
    Code:
    <div id="dictionary">
    <div class="letters">
    <div class="letter" id="letter-a">
    <h3><a href="#">A</a></h3>
    </div>
    <div class="letter" id="letter-b">
    <h3><a href="#">B</a></h3>
    </div>
    <div class="letter" id="letter-c">
    <h3><a href="#">C</a></h3>
    </div>
    <div class="letter" id="letter-d">
    <h3><a href="#">D</a></h3>
    </div>
    </div>
    </div>
    and here's the b.json
    Code:
    {
    "term": "BACCHUS",
    "part": "n.",
    "definition": "A convenient deity invented by the...",
    "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..."
    },
    {
    "term": "BEARD",
    "part": "n.",
    "definition": "The hair that is commonly cut off by..."
    }
    and here's the js file
    Code:
    $(document).ready(function() {
    $('#letter-b a').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);
    });
    });
    return false;
    });
    });

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    You need to wrap your JSON in an array:

    Code:
    [
    {
    	"term": "BACCHUS",
    	"part": "n.",
    	"definition": "A convenient deity invented by the...",
    	"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..."
    },
    {
    	"term": "BEARD",
    	"part": "n.",
    	"definition": "The hair that is commonly cut off by..."
    }
    ]
    Then you can do:

    Code:
    $(document).ready(function() {
    	$('#letter-b a').click(function() {
    		$.getJSON('b.js', 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);
    			});
    		});
    		return false;
    	});
    });

  • Users who have thanked Spudhead for this post:

    capt_nemo777 (03-12-2010)

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    64
    Thanks
    12
    Thanked 0 Times in 0 Posts
    WOW, it worked, all i did was add open and close brackets [] on the json file. thank you sir


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •