CODEWITHSUNDEEP
jquerypythondjangojsonparsing
user2086641
user2086641

Reputation: 4371

json data not loaded using jquery in python

jquery is loading perfectly but json data is not loaded.I am not getting any error also.

script is

$("#loadjson").click(function(){
$.getJSON('filename.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});
});

json file is

{
  "name": "samsung",
  "product": "led tv",
  "rate": "23,000"
}

template is

<head>
<ul></ul>
<button>loadjson</button>
{% block js-custom %}
{% load static %}
<script src="{{ STATIC_URL }}scripts/jquery-1.9.1.min.js"></script>
<script src="{{ STATIC_URL }}scripts/modernizr-2.0.6.min.js"></script>
<script src="{{ STATIC_URL }}scripts/myscript.js"></script>
{% endblock %}
</head>

This is to display the name,product and rate in the screen.

Script is loading properlly,i am not getting error msg also.Nut i am not getting the o/p.What i thought was jon file is not loading.Please help me in doing this.

Guide me if any changes have to made to work this code.

Upvotes: 2

Views: 217

Answers (2)

Michael Geary
Michael Geary

Reputation: 28850

Your HTML is all messed up. You have everything stuffed into the <head>, and there's no ID on your <button> so your click handler never gets set up. Also there's no doctype, no <html> element, and no <title> element. For a start, try this:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    {% block js-custom %}
    {% load static %}
    <script src="{{ STATIC_URL }}scripts/jquery-1.9.1.min.js"></script>
    <script src="{{ STATIC_URL }}scripts/modernizr-2.0.6.min.js"></script>
    <script src="{{ STATIC_URL }}scripts/myscript.js"></script>
    {% endblock %}
</head>
<body>
    <button id="loadjson">Load JSON</button>
</body>
</html>

Another tip: You may be trying to tackle too much at once by working on your Python code and your HTML/JavaScript at the same time. If I were doing this, I would start by doing everything with static HTML, JavaScript, and JSON files. No Python, just static files that you can edit directly, see exactly what's in them, and debug using the browser's Developer Tools. (My favorite for this is Chrome, or you can use Firefox with Firebug, or the built-in developer tools in recent versions of IE.)

Also, use the non-minified versions of jQuery and Modernizr while testing. That way you will see meaningful code and stack traces.

And validate your HTML using the W3C Validator.

After you get it working with static files, then get your Python code to generate identical content. This is easier than trying to figure out both sides at once.

On second thought, if you're a whiz with Python and the only real trouble is the HTML/JavaScript side, the static file idea may not be so important. But at least you should look at things in the browser with View Source and the Developer Tools, because that's all the browser sees. It doesn't see your Python code at all, only what's generated from it.

BTW, here is a great introduction to the Chrome DevTools. Also read through the excellent docs at the Mozilla Developer Network (MDN). In fact, when you're looking up any HTML/CSS/JS related item on Google, it's useful to add "mdn" to your search to make sure it finds the MDN docs for you, since they are often some of the best-quality docs on any topic.

Upvotes: 2

bipen
bipen

Reputation: 36531

use append() or html() to append the li to created ul try this

$('<ul/>', {
'class': 'my-new-list'
}).html(items.join('')).appendTo('body');

Upvotes: 1

Related Questions