json data not loaded using jquery in python

Question

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.

Try to use data = $.parseJSON(data) just after var items = []; — Rosmarine Popcorn
– Rosmarine Popcorn, Commented Apr 8, 2013 at 15:08

Michael Geary · Accepted Answer · 2013-04-08 18:46:23Z

2

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.

edited Apr 8, 2013 at 18:46

answered Apr 8, 2013 at 15:38

Michael Geary

29k9 gold badges67 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ngenator Over a year ago

If you don't understand the answer, you should learn html before attempting any type of javascript or ajax.

Michael Geary Over a year ago

You didn't post the views.py file, but I would skip that to begin with and just get the client side working with static files. See my updated answer for suggestions.

user2086641 Over a year ago

@Michal geary excellent i got lot of things from you i will follow that and i am sorry i didn't written function in views.py for performing this.

Michael Geary Over a year ago

No apology needed, my friend! I'm glad that was helpful so far - give a shout back with any other questions.

bipen · Accepted Answer · 2013-04-08 15:09:41Z

1

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

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

answered Apr 8, 2013 at 15:09

bipen

36.6k9 gold badges51 silver badges62 bronze badges

5 Comments

bipen Over a year ago

you can check your response from the get method.. write console.log(data) before var items = []; and check if you getting the rite data in your console

user2086641 Over a year ago

I did that,in call Stack 4 and 5th line got as "anonymous function" and breakpoint is happened in 5th line

user2086641 Over a year ago

in console window nothing is displaying it is fully blank

user2086641 Over a year ago

Hi i am getting DOMException what would be the problem

Michael Geary Over a year ago

@bipen - I thought the same thing that you did, but I was surprised to learn just now that jQuery does allow you to set the inner HTML of an element with {html:'whatever'} as OP used. For example, try this in the JavaScript console: $('<ul>',{html:'<li>test</li>'})[0].outerHTML

Collectives™ on Stack Overflow

json data not loaded using jquery in python

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related